根据单元格值 DataTable 更改行背景颜色答案

【问题标题】：Change Row background color based on cell value DataTable根据单元格值 DataTable 更改行背景颜色
【发布时间】：2014-09-30 22:55:05
【问题描述】：

我正在使用 DataTable 插件来显示一些记录。我有 3 行，名称、日期、金额。我希望根据金额列中的特定值更改行的背景颜色。

这是我的代码：

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

作为测试，我在上面的代码旁边添加了下面的代码，但出现了错误

“DataTables 警告：table id=tid_css - 无法重新初始化 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>

在不同条件下使用fnRowCallback 做到这一点有多容易，例如如果数量为1，则颜色为Red、2 = Blue、3 = Blue 等。

【问题讨论】：

标签： jquery datatable

【解决方案1】：

好的，我自己解决了这个问题：

$(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');
      }
    }
  });
})

【讨论】：

你知道这如何以动态方式工作，意思是......而不是使用特定索引，获取特定列标题aData的索引[？]
@Jimmy 您可以使用 MyTable.column("#status").index() 获取索引，前提是您已将 ID 分配给 HTML 中的列。
这个解决方案对我不起作用。但是，我在 Datatables 论坛中找到了这个解决方案，并且工作起来很有吸引力（也许 OP 有/有旧版本的数据表）...datatables.net/forums/discussion/29717/…
这个答案会连续设置所有td颜色，这不是一种有效的方法。

【解决方案2】：

自 v 1.10 起，DataTables 具有此功能

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

例子：

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

【讨论】：

其实 v 1.10 的功能是rowCallback。 createdRow 在某些情况下可能会给您相同的效果，但并不相同。
这非常有效！谢谢！我整个上午都在努力解决这个问题！

【解决方案3】：

自 DataTables 1.10+ 以来的等效语法是 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');
    }
}

之前的答案之一提到了createdRow。在某些条件下，这可能会产生类似的结果，但并不相同。例如，如果您在更新一行数据后使用draw()，createdRow 将不会运行。它只运行一次。 rowCallback 将再次运行。

【讨论】：

完全同意rowCallback
Thnx 兄弟，它帮了我很多...我从上一小时开始就发现了。
这可能很简单，但难倒了我一段时间。在我的例子中，数据数组被键入到列名。我不得不使用 data[column_name] 而不是 data[index_number]。

【解决方案4】：

从datatables v1.10.18开始，你应该指定列键而不是索引，应该是这样的：

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

【讨论】：

【解决方案5】：

我使用 createdRow 函数解决了我的问题

    $('#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');
                            }

                        }
                } );

【讨论】：

【解决方案6】：

我使用了 rowCallBack 数据表属性，它工作正常。 PFB：-

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

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

【讨论】：

【解决方案7】：

每当为表的主体创建 TR 元素时的回调。

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

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

【讨论】：

【解决方案8】：

这是更改我的数据表行背景的方法（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;
        }
    }
});

你可以使用fnRowCallback方法函数来改变背景。

【讨论】：

【解决方案9】：

我需要它和索引名称，这对我使用 v. 1.11.3 有效：

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

【讨论】：