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 table script :

$(document).ready(function() {
    $('#data-table').DataTable();
})

problem is - i get all the jquery data table options displayed like search box, number of entries. But none of them work.

Some one please help.

Found this post. But nothing useful.

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 table script :

$(document).ready(function() {
    $('#data-table').DataTable();
})

problem is - i get all the jquery data table options displayed like search box, number of entries. But none of them work.

Some one please help.

Found this post. But nothing useful.

• javascript
• jquery
• d3.js
• dc.js

• Gordon Woodhull published his solution to this problem : github.com/dc-js/dc.datatables.js related to this issue github.com/dc-js/dc.js/issues/966 – Brown nightingale Commented Jul 3, 2019 at 14:07

2 Answers 2

I like to use DynaTable for this - http://www.dynatable.com/

1) Define your table html:

<table id="dc-data-table">
    <thead>
      <tr>
        <th data-dynatable-column="client_name">Client</th>
        <th data-dynatable-column="project_name">Project</th>
      </tr>
    </thead>
 </table>

2) Hook in dynatable with your preferred options and the crossfilter dimension:

         var dynatable = $('#dc-data-table').dynatable({
                features: {
                    pushState: false
                },
                dataset: {
                    records: tableDimension.top(Infinity),
                    perPageDefault: 50,
                    perPageOptions: [50, 100, 200, 500, 1000, 2000, 5000 ,10000]
                }
            }).data('dynatable');

3) Write a method to refresh the table - dc.events helps to limit the number of times this is called on brush changes:

            function RefreshTable() {
                dc.events.trigger(function () {
                    dynatable.settings.dataset.originalRecords = tableDimension.top(Infinity);
                    dynatable.process();
                });
            };

4) hook this method into each charts filter event:

            for (var i = 0; i < dc.chartRegistry.list().length; i++) {
                var chartI = dc.chartRegistry.list()[i];
                chartI.on("filtered", RefreshTable);
            }

5) Call Refresh table once to display the current data:

            RefreshTable();

6) Render the DC charts:

            dc.renderAll();

Here is a jsfiddle for this: http://jsfiddle.net/djmartin_umich/5jweT/2/

Note that in this fiddle I used the group rather than the dimension to feed the dynatable data.

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

Set table html:

<table class="table table-condensed table-hover table-striped" id="dc-data-table">
  <thead>
  <tr class="header">
    <th>Day</th>
    <th>Amount</th>
  </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <th></th>
    <th></th>
  </tfoot>
</table>

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() ;