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
Post a Comment