dc.js dataTable使用jquery dataTable进行条件格式化 [英] dc.js dataTable Conditional formatting using jquery dataTable

问题描述

我有一个使用dc.js构建的仪表板，并且我使用的图表类型为dc.rowChart和dc.dataTables。

在没有条件格式的情况下工作的情况：


dc.rowChart-显示前50名客户

dc.dataTable-显示所有必填字段，并根据rowChart筛选数据。

有条件格式化的工作场景（在数据表行上）

在我的HTML中，我正在为DataTable调用jquery插件（用于conditioanl格式化），这是下面的代码：

I have a dashboard which is built using dc.js and i'm using the chart types dc.rowChart and dc.dataTables.
Working Scenario with without conditional formatting:
dc.rowChart - displays Top 50 Customers
dc.dataTable - displays all the fields required and filters the data based on the rowChart.
Working Scenario with conditional Formatting (on datatable rows)
In my HTML, i'm calling the jquery plugin for DataTable (for conditioanl formatting) and here is the code below:

    <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：

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. 如何为表dc.datatable中的行编码颜色？

2. 如何使用datatables.js应用条件格式？

3. 对数据进行颜色编码dc.js中的表格
4. 如何对表dc.datatable中的行进行颜色编码？（由于我不想对整个行进行颜色编码，因此已选择退出）

ISSUE HERE When i render the page first time, everything with the datatable with conditional formatting works fine
But when i click on Row Chart to filter datatable based on Customer's, Conditional formatting is gone...
Any help is much appreciated to fix this.
I have tried almost all the stack answers but i'm not able to achieve it.
references used below:
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? ( This is opted out as i dont want to color code entire row)

@戈登一直是我的幸存者。.请寻找您的输入内容！

@Gordon my survivor at all times.. Looking for your inputs please!!

推荐答案

我看到您仍在使用dc.js 2.0，所以我没有尝试将此内容添加到 dc.datatables.js 或 dc-tableview 。我仍然认为这样会更容易维护。

I see that you are still on dc.js 2.0, so I didn't attempt to port this to dc.datatables.js or dc-tableview. I still think that would be more maintainable.

正如我在评论中指出的那样， $。DataTable 是一个-way转换：完成此操作后，将无法更新表，因为 dc.dataTable 不再识别DOM结构，而DataTable 没有重新初始化的方法。

As I noted in the comments, $.DataTable is a one-way transformation: once you have done this, there is no way to update the table, because dc.dataTable doesn't recognize the DOM structure anymore, and DataTable doesn't have a way to reinitialize.

可能有一些聪明的方法来获取DataTables以更新数据（这就是库的作用）。首先建立一个表，然后使用DOM作为数据源来构造一个DataTable，效率也很低。

There might be some smart way to get DataTables to update the data (and this is what the libraries do). It's also madly inefficient to first build a table and then construct a DataTable using the DOM as a data source.

但是，不管怎样，让我们​​通过从每次绘制 dc.dataTable 时都要从​​头开始。

But whatever, let's just get this working by building the DataTable from scratch every time the dc.dataTable is drawn.

执行此操作的方法是侦听表的 pretransition 事件，请记住是否已经初始化了DataTable，如果有，请销毁旧实例：

The way to do this is to listen for the table's pretransition event, remember if we've already initialized DataTable, and if we have, destroy the old instance:

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

小提琴的叉子。我不得不修复其他一些问题，但我不会赘述。

Fork of your fiddle. I had to fix a few other things, but I won't go into the details.

这篇关于dc.js dataTable使用jquery dataTable进行条件格式化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！