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

d3.js, dc.js, javascript, jquery

Solution

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.

Problem

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.

Original source

Related problems