CODEWITHSUNDEEP
jquerydatatables
PSR
PSR

Reputation: 40358

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

Upvotes: 21

Views: 45793

Answers (3)

gArn
gArn

Reputation: 421

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

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388446

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

Upvotes: 47

Herve MARTIN
Herve MARTIN

Reputation: 91

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

Upvotes: 7

Related Questions