background-color based on a cell value

Alexist

Hi,

I'm new and very enthusiastic with this tool that I have just discovered.
I'm sorry for my spelling mistakes, I'm French and I'm learning English... Hope you can understand me !

I'm using DateTables (data sources : Javascript array) and I would like to color a cell based on its value. For an example : all the cells name "America" in the "Continent" row = backgroung-color:blue.

I have try to use the "fnRender" function but I only sucess to change the text (font-color). I failled to change the TD settings.

This is my code (a demographic table) :
[code] $(document).ready(function() {
$('#dynamic').html( '' );
$('#example').dataTable( {
"aaSorting": [[1, "asc" ]],
"aaData": aDataSet,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sTitle": "#", "sClass": "right", "sWidth": "50px" },
{ "sTitle": "Country", "sWidth": "300px" },
{"sTitle": "Continent",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "America" ) {
sReturn = "America";
}
return sReturn;
}},
{ "sTitle": "Data", "sClass": "center", "sWidth": "160px", "bSortable": false},
{ "sTitle": "", "sClass": "left", "sWidth": "210px", "bSortable": false}
]
} );
} );
[/code]

The class "test" refers to the css : td.test {background-color: blue;}.

--> It seems thant I can not change the td value with "fnRender", is not it ?. Anyone have an idea if it's possible ?

Thank you in advance,
Read you soon,
Alexis

girishmr

You can use this as an example
[code]
"aoColumnDefs": [
{
"aTargets":[2], // You actual column with the string 'America'
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
if(sData == 'America')
{
$(nTd).css('background-color', 'blue'); // You can use hex code as well
}

},
}
]
[/code]


Hope this helps

Alexist

Thank you so much !! It's solved
I don't know why, I thought that aoColumnDefs was not compatible with aoColumns