如何在drawCallback中的单元格中更改具有特定值的行的背景？
$(table_id).DataTable({
//...
"drawCallback": function (settings) {
// here for each row, if row['type'] != "" then row.bgcolor ="yellow"
},
这是呈现我的表格的完整代码段：
$(table_id).DataTable({
"order": [[0, "desc"]],
serverSide: true,
"processing": true,
rowId: 'MessageID',
ajax: {
url: '/Controller/myRoute',
type: 'POST',
data: {table_id: table_id},
},
"initComplete": function( settings, json ) {
},
"createdRow": function (row, data, index) {
console.log("data is" + data);
},
columns: [
{
data: "Date",
"sortable": true,
"render": function (data) {
var formatted = data;
if (data.indexOf("/Date(") !== -1) {
var date = new Date(parseInt(data.replace("/Date(", "").replace(")/", ""), 10));
formatted = date.toString('dd/MM/yyyy HH:mm:ss');
}
return formatted;
}
},
{ data: "Message_id"},
{ data: "From_id"},
{ data: "Message_text" },
]
});
}
});
Inside / Controller / MyRoute我有代码从数据库中检索10个对象并将它们作为JSON返回。
答案 0 :(得分：1)
使用createdRow回调：
$(document).ready(function() {
$('#example').dataTable({"sPaginationType": "full_numbers",
"createdRow": function (tr, tdsContent) {
if(tdsContent[4] === 'A') {
tr.style.backgroundColor = 'red';
}
}});
});
<html> <head> <title>Row color</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td>6</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td>8.5</td>
<td>C/A<sup>1</sup></td>
</tr>
<tr>
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td>3.1</td>
<td>C</td>
</tr>
<tr>
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td>3.3</td>
<td>A</td>
</tr>
<tr>
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td>3.5</td>
<td>A</td>
</tr>
<tr>
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td>1</td>
<td>C</td>
</tr>
<tr>
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td>1</td>
<td>C</td>
</tr>
<tr>
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td>-</td>
<td>U</td>
</tr>
</tbody>
</table>
</body></html>
答案 1 :(得分：0)
我在另一个回调中使用以下解决方案：
JavaScript的：
"createdRow": function (row, data, index) {
if (data.type !== '') {
$(row).addClass('colored-row');
}
}
然后使用css设置样式：
.colored-row{background-color:yellow;}
答案 2 :(得分：0)
我知道该职位已有几年历史。但是我也一直在寻找解决方案，偶然发现了这里。我能够弄清楚并想分享我的答案。
$(table_id).DataTable({
//...
"drawCallback": function (e) {
var api = this.api();
for (var i = 0; api.rows().count() > i; i++) {
var rowData = api.row(i).data();
var rowNode = api.row(i).node();
var cellNode = api.cell(i, 1).node(); // Can apply same logic to just a cell
// want specific cell to be bolded or some other style --cell(row, column)
if (rowData.type != "") {
$(rowNode).addClass("row-attention");
$(cellNode).addClass("cell-attention");
} else { // remove the class in case it was previously added
$(rowNode).removeClass("row-attention");
$(cellNode).removeClass("cell-attention");
}
}
},
以及以下样式。我个人需要！important，但根据样式表的顺序，可能不需要。
.row-attention {
background-color: #FFFF00 !important;
}
.cell-attention {
font-weight: bold;
}