title: Is there a better/efficient solution to style each DataTable cell based on its value?
body: <p>I have a <code>DataTable</code> into which the values are <code>dynamically inserted</code>. Based on each value of the cell, I need to change its <code>background-color</code> and add some other <code>CSS</code>. I do have a solution here <a href="https://jsfiddle.net/h28yv01e/" rel="nofollow">JSFiddle</a>
  Although,it seems to be slow with large data,is there some other way of achieving this? so that,</p>
  
  <pre><code>  -&gt; The styling does not disappear on sorting the column
    -&gt; It's a little faster than it is now.
  </code></pre>
  
  <p>Code:</p>
  
  <pre><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 &lt; 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('&lt;u&gt;&lt;a target="_blank" href="' + x.Data[0].Link + '"&gt;' + x.Data[0].Value + '&lt;/a&gt;&lt;/u&gt;');
        for(var k=1;k&lt;x.Data.length;k++){
          thisRow.push(x.Data[k].Value);
        }
          t.row.add(thisRow).draw();
      }); 
  </code></pre>
  
  <p>Any suggestions on this highly appreciated! Thank you!</p>