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

2023年8月7日 193次阅读

我有一个DataTable,动态插入值.根据单元格的每个值,我需要更改其背景颜色并添加其他一些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();
    });

对此有任何建议高度赞赏！谢谢！

最佳答案 性能问题：

正如在另一个答案中指出的那样,你不应该在循环中调用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/

点赞