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

Question

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 1

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.