CODEWITHSUNDEEP
jqueryjquery-pluginsdatatables
Gabor Forgacs
Gabor Forgacs

Reputation: 505

change cell background of jquery datatable based on content

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",
   });
});

Upvotes: 11

Views: 34581

Answers (6)

user5099519
user5099519

Reputation:

This worked for me. data[3] means column 4 of the row we're looking at (remember, arrays in javascript are zero-based, that is they start numbering at zero). But when we want to change the cell background, we use the .eq(3) syntax.

"createdRow": function ( row, data, index ) {
    if ( data[3] == "pending" ) {
        $('td', row).eq(3).css('background-color', '#078DC6');
    }
    if ( data[3] == "rendering") {
        $('td', row).eq(3).css('background-color', '#FFDE00');
    }

}

Upvotes: 0

devlin carnate
devlin carnate

Reputation: 8592

Here's how to conditionally style the cells via createdCell, using DataTables 1.10+ syntax.

"columnDefs": [
{
        "targets": [6],
        "createdCell": function(td, cellData, rowData, row, col) {
            var color;
            switch(cellData) {
            case "pending":
                color = '#078DC6';
                break;
            case "success":
                color = '#FFDE00';
                break;
            case "failure":
                color = '#06B33A';
                break;
            default:
                color = '#FF3229';
                break;
            }
            $(td).css('background',color);
        }
    }
],

Upvotes: 0

AntonyManoj
AntonyManoj

Reputation: 157

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;
                                          } },

Upvotes: 4

mbeasley
mbeasley

Reputation: 4874

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.

Upvotes: 7

Tom Maeckelberghe
Tom Maeckelberghe

Reputation: 1999

$('table:last tr:nth-child(2) td:nth-child(2)').
  css("background-color", "#cccccc");

Upvotes: 2

Caner
Caner

Reputation: 59168

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");

Upvotes: 0

Related Questions