I am trying to apply CSS to each of the DataTable cells based on its value, using the drawCallback().The CSS gets applied to a few cells and not all. Here is the JsFiddle to my issue.Has anyone e across this issue and found a solution or have any ideas on this.Please suggest!

  "drawCallback": function( settings ) {
        var api = this.api();
        var visibleRows=api.rows( {page:'current'} ).data();
        if(visibleRows.length >= 1){
        for(var j=1;j<visibleRows[visibleRows.length -1].length;j++){
          $("td:eq("+j+")", settings.nTBody.childNodes[visibleRows.length -1]).addClass(visibleRows[visibleRows.length -1][j]);
        }
        }
    },

I am trying to apply CSS to each of the DataTable cells based on its value, using the drawCallback().The CSS gets applied to a few cells and not all. Here is the JsFiddle to my issue.Has anyone e across this issue and found a solution or have any ideas on this.Please suggest!

  "drawCallback": function( settings ) {
        var api = this.api();
        var visibleRows=api.rows( {page:'current'} ).data();
        if(visibleRows.length >= 1){
        for(var j=1;j<visibleRows[visibleRows.length -1].length;j++){
          $("td:eq("+j+")", settings.nTBody.childNodes[visibleRows.length -1]).addClass(visibleRows[visibleRows.length -1][j]);
        }
        }
    },

• javascript
• jquery
• datatables
• datatables-1.10

• 2 Might look at row render callback datatables/examples/advanced_init/row_callback.html Not clear what your objective is – charlietfl Commented Jul 13, 2016 at 21:10

1 Answer 1

Like @charlietfl said, you don't really want to be using drawCallback to format the rows, and you would probably be better off using createdRow (rowCallback) to do this formatting.

drawCallback is called on every draw event, meaning that it's really meant to be used to update rows that have just been added or work with data that has just been updated.

createdRow on the other hand, is designed to be called whenever a row is created, which seems to be what you really want. In this documentation (example), you can see that the author displays how to use this option to add a class to certain rows, which seems to be the closest to what you want to do.

As far as I can tell, you want to make every cell have a CSS class that is the same as the text in the cell (correct me if I'm wrong). The easiest way to do that with createdRow would be as follows:

"createdRow": function ( row, data, index ) {
    for(var i = 0;i<data.length;i++){
        $('td', row).eq(i).addClass(data[i]);
        //The above line assumes that you want to add a CSS class named "red" to a 
        //field that has the text "red" in it, if not, you can change the logic
    }
}

Just include this in your initialization options for the .DataTables() call.

I had to make some assumptions about the exact logic for what classes get added to what columns, but if they are correct, then this should add a class to each field that is named the same as the text in that field.