dc.js - 使用 jquery 数据表插件的数据表

问题描述

我正在使用 dc.js 创建图表和数据表.

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 数据表脚本:

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

问题是 - 我得到了所有的 jquery 数据表选项，如搜索框、条目数.但它们都不起作用.

problem is - i get all the jquery data table options displayed like search box, number of entries. But none of them work.

请有人帮忙.

发现此帖子.但没什么用处.

Found this post. But nothing useful.

推荐答案

为此我喜欢使用 DynaTable - http://www.dynatable.com/

I like to use DynaTable for this - http://www.dynatable.com/

1) 定义您的表格 html:

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) 使用您的首选选项和交叉过滤器维度挂钩:

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

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) 将此方法挂钩到每个图表过滤器事件中:

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) 调用 Refresh table 一次以显示当前数据:

5) Call Refresh table once to display the current data:

            RefreshTable();

6) 渲染 DC 图表:

6) Render the DC charts:

            dc.renderAll();

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

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 数据表插件的数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！