javascript - 是否有更好/更有效的解决方案来根据其值设置每个 DataTable 单元格的样式？

Question

我有一个 DataTable，其中的值是动态插入的。根据单元格的每个值，我需要更改其 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();
    }); 

非常感谢对此的任何建议!谢谢!

Answer 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;
} 

检查更新后的 fiddle - https://jsfiddle.net/atexooaq/2/