更改 drawCallback DataTables 中一行的背景
[英]Change background of a row in a drawCallback DataTables
问题描述
如何更改 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" },
]
});
}
});
在 /Controller/MyRoute 中，我有从数据库中检索 10 个对象并将它们作为 JSON 返回的代码。
3 个解决方案
解决方案1
1 2016-10-13 09:10:16
使用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>
解决方案2
0 2016-10-13 08:59:36
我在另一个回调中使用以下解决方案：
JavaScript：
"createdRow": function (row, data, index) {
if (data.type !== '') {
$(row).addClass('colored-row');
}
}
然后用 css 设置样式：
.colored-row{background-color:yellow;}
解决方案3
0 2019-07-24 03:24:26
我知道这个帖子已经有几年了。 但我也在为此寻找解决方案并偶然发现了这里。 我能够弄清楚并想我会分享我的答案。
$(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;
}
jQuery 数据表 - drawCallback 和搜索的递归问题 function
[英]jQuery Datatables - Recursive problem with drawCallback and Search function
无法以编程方式在DataTables的drawCallback（）中选择行
[英]Unable to select rows programatically in drawCallback() of DataTables
Jquery Datatables Colvis在列项目点击时触发preDrawCallback和DrawCallback两次
[英]Jquery Datatables Colvis fires preDrawCallback and DrawCallback twice on column item click
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.