How to set color for table rows based on column va

问题:

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

回答1:

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

回答2:

API has recently changed, you should now use aData['Column1'] instead of aData[0]

回答3:

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" );
            }
        },
        // ...
    });