dc.js - 使用jquery數據表插件的數據表

Question

我使用dc.js來創建圖表和數據表。

我想在表格中添加一些分頁樣式和搜索選項。

jQuery的數據表腳本：

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

的問題是 - 我得到這樣的搜索框，輸入的號碼顯示的所有jQuery的數據表選項。但他們都沒有工作。

有人請幫忙。

發現這個post。但沒有用。

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與您的首選選項和crossfilter尺寸：

  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

因爲我更喜歡使用數據表，我適應DJ馬丁的解決方案，像這樣：

設置表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> 

設置你的數據表選項：

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) ; 
     } 
    } 
    ] 
} ; 

創建數據表的實例：

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