It seems that the concern lies with the Version value, which contains dots and may disrupt the CSS styling. To address this, I have excluded the Version value from the concatenation of the css class name. If the goal is understood correctly, the task can be achieved using the method demonstrated on jsbin:
http://jsbin.com/onelev/2/edit
The key approach here is utilizing fnRowCallback to generate the dynamic class name on the table cell.
CSS for designing custom cell colors
.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; }
JavaScript
$(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;
},
});
} );
HTML
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>#</th>
<th>Engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Addendum
DataTables automatically generates the sorting_1 class when a column is sorted. If users click multiple column headers while holding the shift key, additional classes like sorting_2 are created. Although this scenario may be rare, you can account for it by adding extra css rules for those cases.