BMF BMF - 7 months ago 12
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

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.