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

Question

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

这是我的代码:

<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,则颜色为红色,2 =蓝色,3 =蓝色等,这样做有多容易

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

Answer 2

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将再次运行.

Answer 3

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

Answer 4

从数据表v1.10.18开始,你应该指定列键而不是索引,它应该是这样的:

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