I am using jQuery datatables.I have the data like as follows
Column1 Column2 Column3
-----------------------
AAA BBB CCC
AAA GGG YYY
BBB ooo LLL
Now in column1 for first 2 rows i have same value AAA.I want to apply some color to those
rows.And then another color for third row.Like this i have 30 records.Is it possible to do this.If possible how i can do this.I am using jQuery data tables.Thanks in advance..
Use the fnRowCallback (or newer rowCallback) to achieve this
$('#example').dataTable({
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
switch(aData[0]){
case 'AAAA':
$(nRow).css('color', 'red')
break;
case 'BBBB':
$(nRow).css('color', 'green')
break;
case 'CCCC':
$(nRow).css('color', 'blue')
break;
}
}
});
Demo: Fiddle
return nRow is required in this callback function, otherwise, datatable will raise an exception like " a node was not return by fnRowCallBack"
API has recently changed, you should now use aData['Column1'] instead of aData[0]
createdRow functionality was added in v 1.10
This callback is executed when a TR element is created (and all TD child elements have been inserted), or registered if using a DOM source, allowing manipulation of the TR element.
This is particularly useful when using deferred rendering (deferRender) or server-side processing (serverSide) so you can add events, class name information or otherwise format the row when it is created.
https://datatables.net/reference/option/createdRow
Example:
$('#example').dataTable({
// ...
"createdRow": function( row, data, dataIndex ) {
if ( data["column_index"] == "column_value" ) {
$( row ).css( "background-color", "Orange" );
$( row ).addClass( "warning" );
}
},
// ...
});
