Alex Rivera | Logout

change cell background of jquery datatable based on content

Asked 2012-01-31T11:04:00.600
12

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",
   });
});
jquery jquery-plugins datatables
Edit
Report

2 Answers

4

You can change background color of cell dynamically respective of cell value by

{"mData": "index", "sClass": "center" ,"fnRender": function(obj) {
                                              var index  = obj.aData.index;
                                              var isActive  = obj.aData.isActivated;
                                              if(isActive == true){
                                                  obj.oSettings.aoColumns[obj.iDataColumn].sClass = "greenBackground"
                                              }else{
                                                  obj.oSettings.aoColumns[obj.iDataColumn].sClass = "yellowBackground"
                                              }
                                              return index;
                                          } },
answered 2013-04-19T07:09:35.707
0

I haven't tested this but something like this should give you an idea:

// Change i-th row j-th column
var rows = document.getElementById("myTable").getElementsByTagName('tr');
var columns = rows[i].getElementsByTagName('td');
jQuery( columns[j] ).css("background-color", "#cccccc");
answered 2012-01-31T11:21:54.923

Your Answer