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屋！