在从json数据渲染表后，如何根据Datatables.js中的条件为每个单元格着色

Question

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，则背景颜色为"红色"(。我是不是说错了；我该如何让它工作？

Answer 1

您是否尝试将createdRow添加到DataTable()调用中？

$("#example").DataTable({
"data": dataset,
"columns": [
{ "title": "index" },
{ "title": "Name" }
],
"createdRow": (row, data, dataIndex) => {
if(data[2] >  10)
{
$(row).addClass("redClass");
}
}
});

在CSS中：

.redClass
{
background-color: red;
}

这直接来自DataTables文档。

Answer 2

$(document).ready(function() {
var table = $('#example').DataTable({
'ajax': 'https://api.myjson.com/bins/qgcu',
"columnDefs": [ {
"targets":3,
"render": function ( data, type, row, meta ) {
var highlight="";
if(data==5407 || data == 1314)highlight="link"; // Put your conditions here
return '<span class="'+highlight+'"><i class="fa fa-heart" aria-hidden="true"></i> '+data+'</span>';
}
} ],
"initComplete": function(settings, json) {
$(".link").parent().addClass("link");
}
});  

});

.link{
color:white;
background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
<script src="https://cdn.rawgit.com/ashl1/datatables-rowsgroup/fbd569b8768155c7a9a62568e66a64115887d7d0/dataTables.rowsGroup.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<h3>jQuery DataTables - ROWSPAN in table body TBODY</h3>
<hr><br>

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>

使用column.render来实现这一点。希望这能有所帮助。

Answer 3

如果你想基于列来设计特定单元格的样式，你必须使用columnDefs和render选项作为回调，目标指向你想控制其中单元格的列(你也可以在这里查看(。

所以代码应该是这样的：

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;
}
}
}]
});

这是的工作片段

Answer 4

您可以使用columnDefs来实现您想要的内容。

targets是要筛选出的列编号，render是将要渲染该列时触发的事件。因此，您有了所需的数据，可以根据这些数据筛选出结果并应用background-color。

这是演示。

var dataSet = [{
index: 1,
name: "test"
}, {
index: 2,
name: "test2"
}, {
index: 3,
name: "test3"
}];
$(document).ready(function() {
$('#example').DataTable({
data: dataSet,
columns: [{
data: "index"
},
{
data: "name"
}
],
columnDefs: [{
targets : [0],
render: function(data, type, row) {

if(row.index>2){
return "<div style='background-color:red'>"+data+"<div>";
}
return data;
}
}]
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="example" class="display" width="100%"></table>