CODEWITHSUNDEEP
datatablesdc.jscrossfilter
dataguy
dataguy

Reputation: 195

dc.js dataTable Conditional formatting using jquery dataTable

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: 

    .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;
    }

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

Upvotes: 1

Views: 383

Answers (1)

Gordon
Gordon

Reputation: 20150

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.

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.

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.

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

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.

Upvotes: 1

Related Questions