I need every cell in the first column of the datatable to change color as the table is scaled. The color will be set as the table data is generated in the backend.
Here is an example of how I need to:
OntheleftedgeofthefirstcolumnIneedtodefinedifferentcolorsforeachdie.Thiscolorwillbedefinedasexplainedabove.
Here'showI'mcallingthedatatable:
varst=$('#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();
}
});