Is there a better / effective solution for styling each DataTable cell based on its value?

Question

I have DataTablein which values dynamically inserted. Based on each cell value, I need to change it background-colorand add another one CSS. I have a solution here JSFiddle Although it seems slow with big data, is there any other way to achieve this? so that

  -> The styling does not disappear on sorting the column
  -> It a little faster than it is now.

the code:

 var t = $('#example').DataTable( {
           "iDisplayLength": 10,
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "aaSorting": [[1, 'asc']],
            "scrollX": true,
            "scrollCollapse": true,
            "fixedColumns": {"leftColumns": 2},
            "sScrollXInner": "150%",
            "fixedHeader": true,
            "rowCallback": function (row, data) {
               for (var p = 2; p < data.length; p++) {
                if(data[p] == "red"){
                   $('td:eq('+p+')', row).addClass('highlight1');
                }
               }
                if ($.inArray(data.DT_RowId, selected) !== -1) {
                    $(row).addClass('selected');
                }
            },
        } );
        // $('.searchable').tablesearcher({ 'input': $in });
        var selectedSPFName = $("#spfspan").text();

    $.each(md, function(i, x){
    var thisRow = [];
    thisRow.push('<u><a target="_blank" href="' + x.Data[0].Link + '">' + x.Data[0].Value + '</a></u>');
      for(var k=1;k<x.Data.length;k++){
        thisRow.push(x.Data[k].Value);
      }
        t.row.add(thisRow).draw();
    }); 

Any suggestions on this are greatly appreciated! Thank!

Answer 1

Performance issue:

, draw . , DOM, , . , , :

$.each(md, function(i, x) {
    ....
    t.row.add(thisRow);
});
t.draw();

, , . . , drawCallback (https://datatables.net/reference/option/drawCallback) rowCallback , :

"drawCallback": function( settings ) {
    var api = this.api();
    var visibleRows = api.rows( {page:'current'} ).data();
    // manipulate rows here
}

. , , .sorting_1. :

table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
    background-color: #f1f1f1;
}

:

1 - , :

table.dataTable.display tbody tr.odd > td.highlight1{
 background-color: #e6ffe6 ;
} 

2 - !important :

td.highlight1{
 background-color: #e6ffe6 !important;
} 

- https://jsfiddle.net/atexooaq/2/

Answer 2

, draw row.add() . , .

$.each(md, function(i, x) {
    ....
    t.row.add(thisRow);
});
t.draw();