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


i'm using dc.js create charts , data table.

i wanted add pagination styles , search option in table.

jquery data table script :

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

problem - jquery data table options displayed search box, number of entries. none of them work.

some 1 please help.

found post. nothing useful.

i use dynatable - http://www.dynatable.com/

1) define 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 preferred options , 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 method refresh table - dc.events helps limit number of times called on brush changes:

            function refreshtable() {                 dc.events.trigger(function () {                     dynatable.settings.dataset.originalrecords = tabledimension.top(infinity);                     dynatable.process();                 });             }; 

4) hook method each charts filter event:

            (var = 0; < dc.chartregistry.list().length; i++) {                 var charti = dc.chartregistry.list()[i];                 charti.on("filtered", refreshtable);             } 

5) call refresh table once display current data:

            refreshtable(); 

6) render dc charts:

            dc.renderall(); 

here jsfiddle this: http://jsfiddle.net/djmartin_umich/5jwet/2/

note in fiddle used group rather dimension feed dynatable data.


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -