dc.js dataTable使用jquery dataTable进行条件格式化

Question

我有一个使用dc.js构建的仪表板，我正在使用图表类型dc.rowChart和dc.dataTables。 没有条件格式的工作场景： dc.rowChart - 显示前50名客户 dc.dataTable - 显示所需的所有字段，并根据rowChart过滤数据。 具有条件格式的工作场景（在数据表行上） 在我的HTML中，我正在调用DataTable的jquery插件（用于conditioanl格式化），下面的代码如下：

    <script>
    $(document).ready(function() {
    $("#Table").DataTable( {
    /*
        fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
      if ($(nRow).find('td:eq(7)').text()<'0') {
              $(nRow).find('td:eq(7)').addClass('color');
          }   
    }

    */                
                 columns : [
                 { title : "Customer Name" },

                 { title : "YoY Rank Change" ,

                 render: function ( data, type, row ) {
                if (data > '0') {
                    return '<p class="positive">'+data+'</p>';
                } else {
                    return '<p class="negative">'+data+'</p>';
                } } },

                 { title : "Jan'19 Qty" },
                 { title : "Dec'18 Qty" },
                 { title : "Nov'18 Qty" },
                 { title : "Oct'18 Qty" },
                 { title : "Sep'18 Qty" },
                 { title : "Aug'18 Qty" }
                ]   

       } );
    } );

    $.extend( true, $.fn.dataTable.defaults, {
        "searching": true,
        "ordering": false,
        "paging": false,
        "info": false,

    } );
    </script>

CSS：

    .negative {
    background-color:rgba(255,0,0,1.00);
    color: #fff;
    text-align: center;
    }
   .positive {
    background-color:rgba(50,205,50,1.00);
    color: #fff;
    text-align: center;
    }

问题在这里当我第一次渲染页面时，带有条件格式的数据表的所有东西都能正常工作 但是当我点击行图以根据客户过滤数据表时，条件格式化已经消失...... 任何帮助非常感谢解决此问题。 我已经尝试了几乎所有的堆栈答案，但我无法实现它。 以下参考： 1. How to color code rows in a table dc.datatable? 2. How do I apply conditional formatting using datatables.js? 3. Color code a data table in dc.js 4. How to color code rows in a table dc.datatable?（这是选择了，因为我不想为整行编码）

@Gordon我的幸存者在任何时候..请寻找你的投入！

Answer 1

我看到你仍然在dc.js 2.0上，所以我没有尝试将它移植到dc.datatables.js或dc-tableview。我仍然认为这样更容易维护。

正如我在评论中指出的那样，$.DataTable是一个单向转换：一旦你完成了这个，就没有办法更新表，因为dc.dataTable不再识别DOM结构，而DataTable doesn't have a way to reinitialize。

可能有一些聪明的方法可以让DataTables更新数据（这就是库所做的）。首先构建一个表然后使用DOM作为数据源构造一个DataTable也是非常低效的。

但无论如何，让我们通过每次绘制dc.dataTable时从头开始构建DataTable来实现这一点。

这样做的方法是监听表的pretransition事件，记住我们是否已初始化DataTable，如果有，则销毁旧实例：

var dt = null;
table.on('pretransition', function() {
    if(dt)
        dt.destroy();
    dt = $("#dc-data-grid").DataTable( {
        // as before
    } );
});

Fork of your fiddle。我不得不解决其他一些问题，但我不会详细介绍。