Segue abaixo um exemplo de como preciso:
[![Exemplo][1]][1] [1]: https://i.sstatic.net/KmSkv.png
Na borda esquerda da primeira coluna preciso definir cores diferentes para cada dado. Esta cor sera definida como explicado antes.
Segue como estou chamando a datatable:
var st = $('#search_type').val();
table = $('#ticket-table').DataTable({
"dom" : "<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
"processing": true,
"pagingType" : "full_numbers",
"pageLength" : 15,
"serverSide": false,
"orderMulti": false,
responsive: true,
ordering: true,
search:{
smart: false,
regex: true},
order: [
[5, 'asc'],
[12, 'desc']
],
columnDefs: [
{
'checkboxes': {
'selectRow': true,
selectAllPages: false,
},
'targets': [ 0 ],
"render": function ( data, type, row, meta ) {
return "<input type='checkbox' class='dt-checkboxes' name='selected_tickets' value='"+data+"'>";
},
orderable: false,
"searchable": false
},
{
className: "vertical-align-column nowrap-column", "targets": [0,1,2,11]
},
{
className: 'vertical-align-column nowrap-column text-center', "targets": [3,4,5,6,7,8,9,10,13]
},
{ "targets": [2, 6], render: $.fn.dataTable.render.ellipsis( 20 , true, true) },
{
"targets": [ 5, 8, 10, 12],
"visible": false,
"searchable": true
},
{
orderData: 5,
targets: [12]
},
{
"targets": [ 7 ],
"orderable": false },
{
"targets": [ 9 ],
"orderable": false },
{
"targets": [ 13 ],
"orderable": false
},
{
"targets": [ 11 ],
"orderable": false
}
],
'select': {
'style': 'multi',
'selector': 'td:first-child'
},
"language": {
"sEmptyTable": "Nenhum registro encontrado",
"sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
"sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
"sInfoFiltered": "(Filtrados de _MAX_ registros)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "Mostrar _MENU_ resultados por página",
"sLoadingRecords": "Carregando...",
"sProcessing": "Processando...",
"sZeroRecords": "Nenhum registro encontrado",
"sSearch": "Pesquisar: ",
"oPaginate": {
"sNext": "Próximo",
"sPrevious": "Anterior",
"sFirst": "Primeiro",
"sLast": "Último"
},
"oAria": {
"sSortAscending": ": Ordenar colunas de forma ascendente",
"sSortDescending": ": Ordenar colunas de forma descendente"
},
buttons: {
copy: 'Copiar',
print: 'Imprimir',
copyTitle: 'Copiado para área de transferência',
copyKeys: 'Pressione <i>ctrl</i> ou <i>\u2318</i> + <i>C</i> para copiar os dados da tabela para a área de transferência. <br><br>Para cancelar, clique sobre esta mensagem ou pressione Esc.',
copySuccess: {
_: '%d linhas copiadas',
1: '1 linha copiada'
}
},
select: {
rows: {
_: "%d linhas selecionadas",
0: "",
1: "Uma linha selecionada"
}
}
},
"ajax": {
url : "<?php echo site_url("tick/tickpage/" . $page . "/" . $catid. "/" . $statusid. "/" . $situation. "/" . $date) ?>",
type : 'GET',
data : function ( d ) {
}
},
"drawCallback": function(settings, json) {
$('[data-toggle="tooltip"]').tooltip();
}
});
$('#form-search-input').on('keyup change', function () {
search_column = $('#search_type').val();
if (search_column == 0) {
table.search(this.value).draw();
}else{
table.columns(search_column).search(this.value).draw();
}
});