javascript - 从json数据呈现表格后，如何根据Datatables.js中的条件为每个单元格着色？

This question already has answers here:

How do you change background of specific cell in a JQuery.DataTable?

(1个答案)



Datatables: Change cell color based on values

(1个答案)



change color of datatable cell depending on values

(1个答案)



How to set color for table rows based on column value in jQuery data table

(3个答案)


1年前关闭。

var dataset = [];
var columns = sfdata.columns

sfdata.data.forEach(function (item,index) {
    var n2 = item.items
    dataset.push(n2)
});

$(document).ready(function() {
    $('#example').DataTable({
        data: dataset,
        columns: [
            { title: "index" },
            { title: "Name" }

        ]
    });
});

因此，我在Spotfire中创建了默认表，现在的问题是如何根据条件(如果data [2]> 10则background-color为'red')对列中的值进行着色。我实例化错误吗？我该如何工作？

最佳答案

如果要基于列设置特定单元格的样式，则必须使用带有render选项的columnDefs作为具有目标的引用的回调，该目标引用要在其中控制单元格的列(也可以查看here)。

因此代码应如下所示:

  var dataSet = [
["Tiger Nixon", 1, "Edinburgh", "5421", "2011/04/25", "$320,800"],
["Garrett Winters", 12, "Tokyo", "8422", "2011/07/25", "$170,750"],
["Ashton Cox", 4, "San Francisco", "1562", "2009/01/12", "$86,000"],
["Cedric Kelly", 5, "Edinburgh", "6224", "2012/03/29", "$433,060"],
["Airi Satou", 23, "Tokyo", "5407", "2008/11/28", "$162,700"],
["Brielle Williamson", 54, "New York", "4804", "2012/12/02", "$372,000"],
["Herrod Chandler", 2, "San Francisco", "9608", "2012/08/06", "$137,500"]
  ];

var columnDefs = [{
   title: "Name"
  }, {
    title: "Position"
  }, {
    title: "Office"
  }, {
    title: "Extn."
  }, {
    title: "Start date"
  }, {
    title: "Salary"
  }];

var myTable;

myTable = $('#example').DataTable({
   data: dataSet,
   columns: columnDefs,
   columnDefs: [{
     targets: 1, // this means controlling cells in column 1
     render: function(data, type, row, meta) {
       if (data > 10) { // here is your condition
         return '<div class="red-color">' + data + '</div>';
       } else {
         return data;
       }
     }
   }]
 });

这是一个有效的snippet