change cell background of jquery datatable based on content

Question

I am new to datatables - http://datatables.net/ - . I am in trouble to find an example how I could change the background color of a cell based on its position and content.

Something like this worked for me except that the highlighting of the selected row is now 'overcolored' in the cells which have changed background color. If I could get the class name of the row in the fnRowCallback then I could handle it.

$(document).ready(function() {

   // Add a click handler to the rows - this could be used as a callback 
   $("#example tbody").click(function(event) {

      $(oTable.fnSettings().aoData).each(function() {
         $(this.nTr).removeClass('row_selected');
      });
      (event.target.parentNode).addClass('row_selected');
   });


   oTable = $('#example').dataTable({

      "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {

         $(nRow).children().each(function(index, td) {

            if (index == 6) {

               if ($(td).html() === "pending") {
                  $(td).css("background-color", "#078DC6");
               } else if ($(td).html() === "rendering") {
                  $(td).css("background-color", "#FFDE00");
               } else if ($(td).html() === "success") {
                  $(td).css("background-color", "#06B33A");
               } else if ($(td).html() === "failure") {
                  $(td).css("background-color", "#FF3229");
               } else {
                  $(td).css("background-color", "#FF3229");
               }
            }
         });
         return nRow;
      },
      "bProcessing": true,
      "bServerSide": true,
      "sAjaxSource": "scripts/server_processing.php",
      "sPaginationType": "full_numbers",
   });
});

Answer 1

I know the question was already answered, but I thought I would share how I was able to apply "conditional formatting" of sorts to various cells, in the following way:

First, I added a class to each column during my datatables initialization:

"aoColumns": [{
                "mDataProp": "serial",
                "sClass": "serial"
            }, {
                "mDataProp": "us",
                "sClass": "us"
            }...],

Then, I created an addFormat() function that was called each redraw (I had to do it this way because I have a live table that updates in realtime):

"fnDrawCallback": function(oSettings) { addFormat(); },

In the addFormat function, I essentially defined all of my formatting rules, via CSS classes. I used a jQuery :contains extension in order to apply very specific rules with regular expressions and such. My selectors for these rules would be td and whatever class I had assigned to a column during datatables initialization:

 $("td.us:containsRegex(/^[xtfv]$/)").addClass("s4 queue");

That worked very well for me.