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

时间:2016-07-12 20:45:11

标签: javascript jquery datatable datatables datatables-1.10

我有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();
    }); 

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

2 个答案:

答案 0 :(得分:1)

效果问题:

正如在另一个答案中指出的那样,你不应该在循环中调用draw。任何涉及操纵DOM的东西都可能很昂贵,并且应该尽可能少地使用。所以你操纵循环中的数据,然后渲染:

$.each(md, function(i, x) {
    ....
    t.row.add(thisRow);
});
t.draw();

我相信这会加快速度,而且应该足够了。但是这种方法将立即迭代整个表格。如果你有一个很长的表,你可以使用drawCallbackhttps://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();