Change Row background color based on cell value DataTable

Question

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    lt script type  text javascript  charset  utf-8  gt      document  ready function         var table       tid css   DataTable          iDisplayLength   100         bFilter   false         aaSorting              2   desc                          lt  script gt      As a test  I added below code alongside above code but getting below error      DataTables warning  table id tid css - Cannot reinitialise DataTable     lt script type  text javascript  charset  utf-8  gt      document  ready function             tid css   dataTable          fnRowCallback   function nRow  aData  iDisplayIndex  iDisplayIndexFull            if  aData 2      1                  td eq 2    nRow  html   lt b gt 1 lt  b gt                                      lt  script gt      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

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   gt   90                                       row  css  background-color     F39B9B                                                              else if  data 5   lt   70                                       row  css  background-color     A497E5                                                              else                                    row  css  background-color     9EF395

User · Answer

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

[jquery] Change Row background color based on cell value DataTable

Examples related to jquery

Examples related to datatable