javascript – dc.js – 使用jquery data-table插件的数据表

前端之家收集整理的这篇文章主要介绍了javascript – dc.js – 使用jquery data-table插件的数据表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用dc.js来创建图表和数据表.

我想在表格中添加一些分页样式和搜索选项.

jQuery数据表脚本:

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

问题是 – 我得到的所有jquery数据表选项显示搜索框,条目数.但它们都不起作用.

有人请帮忙.

发现这个post.但没什么用.

解决方法

我喜欢使用DynaTable – http://www.dynatable.com/

1)定义你的表格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)使用您的首选选项和交叉过滤器维度挂钩dynatable:

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)编写一个刷新表的方法 – dc.events有助于限制刷子更改时调用次数

function RefreshTable() {
                dc.events.trigger(function () {
                    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()[i];
                chartI.on("filtered",RefreshTable);
            }

5)调用刷新表一次以显示当前数据:

RefreshTable();

6)渲染DC图表:

dc.renderAll();

这是一个jsfiddle:http://jsfiddle.net/djmartin_umich/5jweT/2/

请注意,在这个小提琴中,我使用组而不是维度来提供可动态数据.

猜你在找的jQuery相关文章