dc.js - data table using jquery data-table plugin

Question

I\'m using dc.js to create charts and data table.

I wanted to add some pagination styles and search option in the table.

jQuery Data ta

Answer 1

Since I prefer to use DataTables, I adapted DJ Martin's solution like so:

Set table html:

  

  

    
Day
    
Amount
  
  
  

  
  

    

    

  

Set your DataTables options:

var dataTableOptions = {
  "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
  "footerCallback": function ( row, data, start, end, display ) {
    var api = this.api(), data ;

    var total = ndx.groupAll().reduceSum(function (d) { return d.amount }).value() ;
    // Update footer
    $( api.column( 1 ).footer() ).html(
      currencyFormat(total)
    ) ;
  },
  "order": [[1, 'desc']],
  "dom": 'T<"clear-l"l><"clear-l"i><"clear-r"f><"clear-r"p>t',
  "tableTools": {
    "sSwfPath": "copy_csv_xls_pdf.swf"
  },
  columnDefs: [{
      targets: 0,
      data: function (d) {
        return d3.time.format('%Y-%m-%d')(d.first_request) ;
      }
    }, {
      targets: 1,
      data: function (d) {
        return currencyFormat(d.amount) ;
      }
    }
  ]
} ;

Create DataTables instance:

var datatable = $('#dc-data-table').dataTable(dataTableOptions) ;

Create RefreshTable function and attach to charts:

function RefreshTable() {
  dc.events.trigger(function () {
    datatable.api()
      .clear()
      .rows.add( tableDimension.top(Infinity) )
      .draw() ;
  });
}
for (var i = 0; i < dc.chartRegistry.list().length; i++) {
  var chartI = dc.chartRegistry.list()[i];
  chartI.on("filtered", RefreshTable);
}
RefreshTable() ;

Call RefreshTable() once to load initial data, and render all charts:

RefreshTable() ;
dc.renderAll() ;