Skip to content Skip to sidebar Skip to footer

Change Color Of Datatable Cell Depending On Values

I am working on data table in which I have to change the color of one td depending on values coming from server. For now, I have successfully updated the color of complete row, But

Solution 1:

Changing the color with the CSS function of jQuery is not the best way, also it doesn't work as expected.

Better add a class to the specific TD:

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  if(aData.statusCode == "FAILED"){
    $("td:nth-child(2)", nRow).addClass("failed");
    $("td:nth-child(2)", nRow).removeClass("running");
  }
  if(aData.statusCode == "RUNNING"){
    $("td:nth-child(2)", nRow).removeClass("failed");
    $("td:nth-child(2)", nRow).addClass("running");
  }
}

The CSS would look like this:

td.failed {
  background-color: red;
}
td.running {
  background-color: green;
}

Edit

Added the :nth-child(2) selector the TD's.

Post a Comment for "Change Color Of Datatable Cell Depending On Values"