I want to have my table highlight an entire row when a certain data element is present in that row. But when ordering is applied to a column, that column seem to get ignored from the rowCallback, which leads to it not being highlighted. Currently, I have column 0 set to descending order by default.
$(document).ready(function() {
let table = $("#dataTable").DataTable({
"ajax": {
"url": "/datatable",
"type": "POST",
"dataSrc": "data"
},
"columnDefs": [
{"className": "dt-center", "targets": "_all"},
],
"columns": [
{"data": "A", "type": "num"},
{"data": "B", "type": "date"},
{"data": "C", "type": "string"},
{"data": "Quantity", "type": "num"},
],
"autoWidth": true,
"order": [[0, "desc"]],
dom: 'Blfrtip',
pageLength: 5,
"rowCallback": function(row, data, index) {
if ( data.C == 'foo' ) {
$(row).css('background-color','#FFFFE0')
}
}
}).draw();
});
Figured out the answer from this question.
Replaced $(row).css('background-color','#FFFFE0')
with $('td', row).css('background-color', '#FFFFE0');
Some commenters were saying that using 'td' is inefficient but it works and i'm only displaying under 10 results per page.