PSR PSR - 1 month ago 5
jQuery Question

How to set color for table rows based on column value in jQuery data table

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..

Answer

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