dc.js dataTable 使用 jquery dataTable 的条件格式

Question

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

    <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.
2. How do I apply conditional formatting using datatables.js?
3. 4. （这被选择退出，因为我不想对整行进行颜色编码）

@Gordon 我一直都是幸存者..请寻找您的意见！！

Answer 1

我看到您仍在使用 dc.js 2.0，所以我没有尝试将其移植到 dc.datatables.js or dc-tableview。我仍然认为那样会更易于维护。

正如我在评论中指出的那样，$.DataTable 是一种单向转换：一旦完成此操作，就无法更新 table，因为 dc.dataTable 不会' 不再识别 DOM 结构和 DataTable doesn't have a way to reinitialize.

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

但是无论如何，让我们在每次绘制 dc.dataTable 时从头开始构建 DataTable 来实现它。

方法是监听table的pretransition事件，记住我们是否已经初始化了DataTable，如果已经初始化了，销毁旧的实例：

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

Fork of your fiddle。我不得不修复其他一些问题，但我不会详细说明。

dc.js dataTable 使用 jquery dataTable 的条件格式

dc.js dataTable Conditional formatting using jquery dataTable

datatables

crossfilter

dc.js