DataTable: Is there a better/efficient solution to style each DataTable cell based on its value?

Sunshine89

I have a DataTable into which the values are dynamically inserted. Based on each value of the cell, I need to change its background-color and add some other CSS. I do have a solution here JSFiddle Although,it seems to be slow with large data,is there some other way of achieving this? so that,
-> The styling does not disappear on sorting the column
-> It's a little faster than it is now.

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 highly appreciated! Thank you!

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

lesalgado47

Hi, what type of workaround were you able to figure out ?

I had a similar requirement, what I chose to do was to use Editor and place DOM elements with color coding classes in the Database. The DOM elements were buttons held in the cell and then put color css to each. I also added a few event listeners that allowed users to change the status of each row.

Maybe we can share ideas?

Sunshine89

@lesalgado47 : Here is how I am working on it for now.But considering large amount of data, this is slow (about 7-8secs). Trying to optimize on this one.

I did try something similar to what you describing.Here is how this looks But that din't fix my issue either.

allan

t.row.add(thisRow).draw();

That is inside a loop. Don't call draw() inside a loop. Call it once only after the loop has completed, otherwise performance will drive over a cliff...

Allan