dc.js - 使用jquery数据表插件的数据表 [英] dc.js - data table using jquery data-table plugin
问题描述
我使用 dc.js
创建图表和数据表。
我想添加一些分页样式和搜索选项。
jQuery数据表脚本:
$(document).ready(function(){
$('#data-table')。DataTable();
})
问题是 - 我得到所有的jquery数据表选项显示像搜索框,条目数。
找到这个 帖子 。
我喜欢使用DynaTable - http://www.dynatable.com/
1)定义表格html:
< table id =dc-data-table>
< aad>
< tr>
< th data-dynatable-column =client_name>客户< / th>
< th data-dynatable-column =project_name> Project< / th>
< / tr>
< / thead>
< / table>
2)使用您喜欢的选项和crossfilter维度挂钩:
var dynatable = $('#dc-data-table')。dynatable({
features:{
pushState:false
},
dataset:{
records:tableDimension.top(Infinity),
perPageDefault:50,
perPageOptions:[50,100,200,500, 2000,5000,10000]
}
})。data('dynatable');
3)写一个方法来刷新表 - dc.events有助于限制次数调用刷子更改:
函数RefreshTable(){
dc.events.trigger(function b $ b dynatable.settings.dataset.originalRecords = tableDimension.top(Infinity);
dynatable.process();
});
};
4)将此方法挂接到每个图表过滤器事件中:
for(var i = 0; i< dc.chartRegistry.list()。length; i ++){
var chartI = dc.chartRegistry.list )[一世];
chartI.on(filtered,RefreshTable);
}
5)调用刷新表一次以显示当前数据:
RefreshTable();
6)渲染DC图表:
dc.renderAll();
这里有一个jsfiddle:http://jsfiddle.net/djmartin_umich/5jweT/2/
请注意,在这个小提琴中,我使用的是比提供动态数据的维度更高。
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 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.
这篇关于dc.js - 使用jquery数据表插件的数据表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!