我有DataTable
,其值为dynamically inserted
。根据单元格的每个值,我需要更改其background-color
并添加其他CSS
。我在这里有一个解决方案JSFiddle
虽然大数据似乎很慢,但还有其他方法可以实现吗?所以,
-> The styling does not disappear on sorting the column
-> It's a little faster than it is now.
代码:
var t = $('#example').DataTable( {
"iDisplayLength": 10,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"aaSorting": [[1, 'asc']],
"scrollX": true,
"scrollCollapse": true,
"fixedColumns": {"leftColumns": 2},
"sScrollXInner": "150%",
"fixedHeader": true,
"rowCallback": function (row, data) {
for (var p = 2; p < data.length; p++) {
if(data[p] == "red"){
$('td:eq('+p+')', row).addClass('highlight1');
}
}
if ($.inArray(data.DT_RowId, selected) !== -1) {
$(row).addClass('selected');
}
},
} );
// $('.searchable').tablesearcher({ 'input': $in });
var selectedSPFName = $("#spfspan").text();
$.each(md, function(i, x){
var thisRow = [];
thisRow.push('<u><a target="_blank" href="' + x.Data[0].Link + '">' + x.Data[0].Value + '</a></u>');
for(var k=1;k<x.Data.length;k++){
thisRow.push(x.Data[k].Value);
}
t.row.add(thisRow).draw();
});
对此有任何建议高度赞赏!谢谢!
答案 0 :(得分:1)
效果问题:
正如在另一个答案中指出的那样,你不应该在循环中调用draw
。任何涉及操纵DOM的东西都可能很昂贵,并且应该尽可能少地使用。所以你操纵循环中的数据,然后渲染:
$.each(md, function(i, x) {
....
t.row.add(thisRow);
});
t.draw();
我相信这会加快速度,而且应该足够了。但是这种方法将立即迭代整个表格。如果你有一个很长的表,你可以使用drawCallback
(https://datatables.net/reference/option/drawCallback)而不是rowCallback
,并通过获取当前页面来操纵只有可见的行:
"drawCallback": function( settings ) {
var api = this.api();
var visibleRows = api.rows( {page:'current'} ).data();
// manipulate rows here
}
样式问题
这个很容易修复。您的方法实际上正在工作,但是当您对行进行排序时,会向该单元格添加一个类.sorting_1
。这个类有一个强选择器,并覆盖你的背景颜色定义:
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
background-color: #f1f1f1;
}
您的选择是:
1 - 比上述规则更具体:
table.dataTable.display tbody tr.odd > td.highlight1{
background-color: #e6ffe6 ;
}
2 - 在样式定义中添加!important
:
td.highlight1{
background-color: #e6ffe6 !important;
}
查看您的更新小提琴 - https://jsfiddle.net/atexooaq/2/
答案 1 :(得分:0)
我的猜测是在每个row.add()之后调用draw是杀手。尝试 在添加完所有行后调用draw。
$.each(md, function(i, x) {
....
t.row.add(thisRow);
});
t.draw();