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

Posted 2023-02-22

【中文标题】dc.js - 使用 jquery 数据表插件的数据表

【英文标题】：dc.js - data table using jquery data-table plugin

【发布时间】：2014-03-03 00:39:09

【问题描述】：

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

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

jQuery 数据表脚本：

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

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

请有人帮忙。

找到这个post。但没什么用处。

【问题讨论】：

Gordon Woodhull 发表了他对此问题的解决方案：github.com/dc-js/dc.datatables.js 与此问题相关github.com/dc-js/dc.js/issues/966

【参考方案1】：

我喜欢为此使用 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) 使用您的首选选项和交叉过滤器维度挂钩可动态化：

         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 dataTables和dynaTables有什么区别？

它们都是 jquery 的插件。我喜欢 dynatable，因为语法更好，并且更容易改变事物的呈现方式。查看dynatable.com

【参考方案2】：

由于我更喜欢​​使用 DataTables，所以我调整了 DJ Martin 的解决方案，如下所示：

设置表格html：

<table class="table table-condensed table-hover table-striped" id="dc-data-table">
  <thead>
  <tr class="header">
    <th>Day</th>
    <th>Amount</th>
  </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <th></th>
    <th></th>
  </tfoot>
</table>

设置您的 DataTables 选项：

var dataTableOptions = 
  "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
  "footerCallback": function ( row, data, start, end, display ) 
    var api = this.api(), data ;

    var total = ndx.groupAll().reduceSum(function (d)  return d.amount ).value() ;
    // Update footer
    $( api.column( 1 ).footer() ).html(
      currencyFormat(total)
    ) ;
  ,
  "order": [[1, 'desc']],
  "dom": 'T<"clear-l"l><"clear-l"i><"clear-r"f><"clear-r"p>t',
  "tableTools": 
    "sSwfPath": "copy_csv_xls_pdf.swf"
  ,
  columnDefs: [
      targets: 0,
      data: function (d) 
        return d3.time.format('%Y-%m-%d')(d.first_request) ;
      
    , 
      targets: 1,
      data: function (d) 
        return currencyFormat(d.amount) ;
      
    
  ]
 ;

创建 DataTables 实例：

var datatable = $('#dc-data-table').dataTable(dataTableOptions) ;

创建 RefreshTable 函数并附加到图表：

function RefreshTable() 
  dc.events.trigger(function () 
    datatable.api()
      .clear()
      .rows.add( tableDimension.top(Infinity) )
      .draw() ;
  );

for (var i = 0; i < dc.chartRegistry.list().length; i++) 
  var chartI = dc.chartRegistry.list()[i];
  chartI.on("filtered", RefreshTable);

RefreshTable() ;

调用 RefreshTable() 一次加载初始数据，并渲染所有图表：

RefreshTable() ;
dc.renderAll() ;