Search code examples
datatables

datatables ordered column messes up rowCallback highlighting


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();
});

Solution

  • 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.