CODEWITHSUNDEEP
jquerydatatable
Chelseawillrecover
Chelseawillrecover

Reputation: 2644

Change Row background color based on cell value DataTable

I am using DataTable plugin to display some records. I have 3 rows, Name, Date, Amount. I want the background color of the row to change based on specific values in the amount column.

This is my code:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    var table = $('#tid_css').DataTable({
      'iDisplayLength': 100,
      "bFilter": false,
      "aaSorting": [
        [2, "desc"]
      ]
    });
  });
</script>

As a test, I added below code alongside above code but getting below error

"DataTables warning: table id=tid_css - Cannot reinitialise DataTable"

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('#tid_css').dataTable({
      "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        if (aData[2] == "1") {
          $('td:eq(2)', nRow).html('<b>1</b>');
        }
      }
    });
  });
</script>

How easy can I do this using fnRowCallback with different conditions like if amount is 1 then color is Red, 2 = Blue, 3 = Blue etc.

Upvotes: 43

Views: 174161

Answers (9)

Nnn
Nnn

Reputation: 169

Since datatables v1.10.18, you should specify the column key instead of index, it should be like this:

rowCallback: function(row, data, index){
    if(data["column_key"] == "ValueHere"){
        $('td', row).css('background-color', 'blue');
    }
}

Upvotes: 10

Luis Rodriguez
Luis Rodriguez

Reputation: 483

I needed it with the index name and this is what worked for me using v. 1.11.3:

"createdRow": function( row, data, dataIndex ) {
    if ( data['my_column_name'] == 1 ) {
        $(row).addClass( 'bg-warning' );
    }
},

Upvotes: 2

Bhanu Sengar
Bhanu Sengar

Reputation: 382

This is how managed to change my data table row background (DataTables 1.10.19)

$('#memberList').DataTable({
    "processing": true,
    "serverSide": true,
    "pageLength":25,
    "ajax":{
        "dataType": "json",
        "type": "POST",
        "url": mainUrl+"/getMember",
       },
    "columns": [
        { "data": "id" },
        { "data": "name" },
        { "data": "email" },
        { "data": "phone" },
        { "data": "country_id" },
        { "data": "created_at" },
        { "data": "action" },
    ],
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        switch(aData['country_id']){
            case 1:
                $('td', nRow).css('background-color', '#dacfcf')
                break;
        }
    }
});

You can use fnRowCallback method function to change the background.

Upvotes: 4

Priya Chetwani
Priya Chetwani

Reputation: 61

Callback for whenever a TR element is created for the table's body.

$('#example').dataTable( {
      "createdRow": function( row, data, dataIndex ) {
        if ( data[4] == "A" ) {
          $(row).addClass( 'important' );
        }
      }
    } );

https://datatables.net/reference/option/createdRow

Upvotes: 0

gArn
gArn

Reputation: 421

DataTables has functionality for this since v 1.10

https://datatables.net/reference/option/createdRow

Example:

$('#tid_css').DataTable({
  // ...
  "createdRow": function(row, data, dataIndex) {
    if (data["column_index"] == "column_value") {
      $(row).css("background-color", "Orange");
      $(row).addClass("warning");
    }
  },
  // ...
});

Upvotes: 16

Chelseawillrecover
Chelseawillrecover

Reputation: 2644

OK I was able to solve this myself:

$(document).ready(function() {
  $('#tid_css').DataTable({
    "iDisplayLength": 100,
    "bFilter": false,
    "aaSorting": [
      [2, "desc"]
    ],
    "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
      if (aData[2] == "5") {
        $('td', nRow).css('background-color', 'Red');
      } else if (aData[2] == "4") {
        $('td', nRow).css('background-color', 'Orange');
      }
    }
  });
})

Upvotes: 69

satya prakash
satya prakash

Reputation: 97

I Used rowCallBack datatable property it is working fine. PFB :-

"rowCallback": function (row, data, index) {

                        if ((data[colmindx] == 'colm_value')) { 
                            $(row).addClass('OwnClassName');
                        }
                        else if ((data[colmindx] == 'colm_value')) {
                                $(row).addClass('OwnClassStyle');
                            }
                    }

Upvotes: 0

Arpit Singh
Arpit Singh

Reputation: 416

I used createdRow Function and solved my problem

    $('#result1').DataTable( {
        data: data['firstQuery'],
        columns: [
                        { title: 'Shipping Agent Code' },
                        { title: 'City' },
                        { title: 'Delivery Zone' },
                        { title: 'Total Slots Open ' },
                        { title: 'Slots Utilized' },
                        { title: 'Utilization %' },

                    ],
                    "columnDefs": [
                        {"className": "dt-center", "targets": "_all"}
                      ],
                      "createdRow": function( row, data, dataIndex){
                            if( data[5] >= 90  ){
                                $(row).css('background-color', '#F39B9B');
                            }
                            else if( data[5] <= 70  ){
                                $(row).css('background-color', '#A497E5');
                            }
                            else{
                                $(row).css('background-color', '#9EF395');
                            }

                        }
                } );

Upvotes: 3

devlin carnate
devlin carnate

Reputation: 8592

The equivalent syntax since DataTables 1.10+ is rowCallback

"rowCallback": function( row, data, index ) {
    if ( data[2] == "5" )
    {
        $('td', row).css('background-color', 'Red');
    }
    else if ( data[2] == "4" )
    {
        $('td', row).css('background-color', 'Orange');
    }
}

One of the previous answers mentions createdRow. That may give similar results under some conditions, but it is not the same. For example, if you use draw() after updating a row's data, createdRow will not run. It only runs once. rowCallback will run again.

Upvotes: 34

Related Questions