BMF BMF - 1 year ago 51
Javascript Question

How do you change background of specific cell in a JQuery.DataTable?

I'm trying to change the styling of some specific cells in a DattaTable, but I'm not sure how to do that. I know how to change for an entire column, but that's not what i need.
So let's say that my data is like:

name: "user1",
gender : "f",
age: 54
name: "user1",
gender : "m",
age: 33

In my table, I have

columns: [{
data: "name"
data: "age"

And I want to highlight, lets say, the age cells in blue case gender = "m" or red case gender = "f".

Any suggestion on how I can accomplish that?

Thank you!

Answer Source

You would use the column configuration's createdCell function.

Basically, you need to add a column definition for the gender column that includes a callback that will be called when the cell is populated. Try adding this object to your columns array:

      data: "gender",
      createdCell: function(td, cellData, rowData, row, col){
        var color = (cellData === 'm') ? 'blue' : 'red';
        $(td).css('color', color);

Here is a working example.