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

Question

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

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

jQuery数据表脚本:

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

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

有人请帮忙.

找到这篇文章.但没什么用.

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

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

Answer 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() ;