Question

I´m trying to change the row color depending on a value, for a server side loaded datatable, but it’s not working. I’m using a code like this one on my javascript:

$('#table').dataTable({
     'bServerSide': true,
     'bProcessing': true,
     'sAjaxSource': 'datatables/my_ajax.php',
     'iDisplayLength': 50,
     "sPaginationType": "bootstrap",
     "fnInitComplete": function(oSettings) {
         for (var i = 0, iLen = oSettings.aoData.length; i < iLen; i++) {
             if (jQuery.inArray(oSettings.aoData[i]._aData[2], food_types) != -1) {
                 oSettings.aoData[i].nTr.className = "myClass";
             }
         }
     },

myClass looks like:

.myClass{ 
    background-color: red;
}

.myClass td {
   background-color: red; 
}

So, basically when the second <td> of each row has a value that appears on the food types array, the class should be changed to myClass. This part is working (I can see with firebug that the class has changed), however I cannot see the change (I don’t see the row turning to red background). What am I missing? Also, is this a good approach or a cleaner way would be to change the color from ajax directly? If so, how?

Answer 1

Looks like your dataTable’s CSS wrapper is overwriting your style .. Maybe that the reason you do not see the change in the backgroundcolor..

Looks like you need to change the class on which it is being applied..

Maybe more in these terms

table.display.myClass 
{

 background-color: red !important
}

table.display.myClass td
{

 background-color: red !important
}

More like guessing the wrapper as i have no idea about the exact classes being applied by the datatables plugin..