Example of providing style to a table cell via fnRowCallback

woot4moo

I think this would be a good candidate to put in the examples as it currently stands I had to go to SO to get the solution and I imagine I am not the only one that had to do this. Also, this prevents you from having to use the [code]div[/code] work around to apply styling.


I had posted the following to SO: http://stackoverflow.com/questions/17070064/datatables-jquery-supply-dynamic-array-index-value-on-sclass

Which was essentially a question about how can I bind CSS to a table cell given a PHP concatenated string. That is when using PHP where someone generates the html bindings instead of separating them how can I correctly provide style to a cell:


this is the JSbin that was provided:
http://jsbin.com/onelev/2/edit

and in case of link rot:

CSS
[code]
.customCSS-Trident, table.dataTable tr.even td.customCSS-Trident.sorting_1, table.dataTable tr.odd td.customCSS-Trident.sorting_1 { background-color: blue; color: #fff; }
.customCSS-Fish, table.dataTable tr.even td.customCSS-Fish.sorting_1, table.dataTable tr.odd td.customCSS-Fish.sorting_1 { background-color: green; color: #fff; }
.customCSS-Pony, table.dataTable tr.even td.customCSS-Pony.sorting_1, table.dataTable tr.odd td.customCSS-Pony.sorting_1 { background-color: brown; color: yellow; }
.customCSS-Cabbage, table.dataTable tr.even td.customCSS-Cabbage.sorting_1, table.dataTable tr.odd td.customCSS-Cabbage.sorting_1 { background-color: pink; }
[/code]

JavaScript
[code]
$(document).ready( function() {
var oTable = $('#example').dataTable( {
"aaData": aDataSet,
"aoColumnDefs": [
{ "aTargets": [ 0 ],
"sTitle": "#"
},
{ "aTargets": [ 1 ],
"sTitle": "Engine"
},
{ "aTargets": [ 2 ],
"sTitle": "Browser"
},
{ "aTargets": [ 3 ],
"sTitle": "Platform"
},
{ "aTargets": [ 4 ],
"sTitle": "Version"
},
{ "aTargets": [ 5 ],
"sTitle": "Grade",
"sClass": "center"
}
],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(4)', nRow).addClass("customCSS-" + aData[1]);
return nRow;
},
});
} );
[/code]

HTML
[code]



#
Engine
Browser
Platform(s)
Engine version
CSS grade





[/code]