重新排序的數據表通過

Question

列

我想知道是否有任何已知的方式在dc.js.有效地增加了「重新排序」功能，我的數據表如果我的用戶，成就了他們的選擇與圖表後，這將是巨大的，可根據其列過濾行的，要責令（通過單擊列標題爲例）決定。

任何想法從哪裏開始？

非常感謝

Answer 1

我喜歡使用jQuery的DataTable此：http://datatables.net/

首先添加表和標題行：

<table id="dc-data-table" class="list table table-striped table-bordered"> 
     <thead> 
      <tr> 
       <th>Country</th> 
       <th>Users</th> 
      </tr> 
     </thead> 
    </table> 

下一頁建立你的尺寸像正常：

var ndx = crossfilter(data), 
     countryDimension = ndx.dimension(function (d) { 
      return d.country; 
     }), 

然後結合jquery的數據表：

var datatable = $("#dc-data-table").dataTable({ 
      "bPaginate": false, 
      "bLengthChange": false, 
      "bFilter": false, 
      "bSort": true, 
      "bInfo": false, 
      "bAutoWidth": false, 
      "bDeferRender": true, 
      "aaData": countryDimension.top(Infinity), 
      "bDestroy": true, 
      "aoColumns": [ 
       { "mData": "country", "sDefaultContent": ""}, 
       { "mData": "users", "sDefaultContent": " " } 
      ] 
     }); 

最後，把它嵌入dc.js如果你想表以反映其他圖表的過濾器：

 function RefreshTable() { 
      dc.events.trigger(function() { 
       alldata = countryDimension.top(Infinity); 
       datatable.fnClearTable(); 
       datatable.fnAddData(alldata); 
       datatable.fnDraw(); 
      }); 
     } 

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

這裏是一個的jsfiddle演示了此：http://jsfiddle.net/djmartin_umich/d55My/

Answer 2

這裏是只使用標準的jQuery和dc.js

帶列標題定義你的HTML表格另一個表的排序方法。

<table id="data-table"> 
    <thead> 
    <th class="data-table-col" data-col="a">Field A</th> 
    <th class="data-table-col" data-col="b">Field B</th> 
    <th class="data-table-col" data-col="c">Field C</th> 
    </thead> 
</table> 

設置DC.js數據表。唯一重要的是列配置。使用不動態創建頭

var dataDim = xf.dimension(function(d) {return d.a;}); 
var dataTable = dc.dataTable("#data-table") 
    .columns([ 
    function(d) { 
     return d.a; 
    }, 
    function(d) { 
     return d.b; 
    }, 
    function(d) { 
     return d.c; 
    } 
    ]); 

然後格式，只需連接一個click事件處理列標題，並使用DC.js排序表。編輯 - 你也必須更改尺寸，以便sortBy排序的所有數據，而不僅僅是顯示的數據

$('#data-table').on('click', '.data-table-col', function() { 
    var column = $(this).attr("data-col"); 
    dataDim.dispose(); 
    dataDim = xf.dimension(function(d) {return d[column];}); 
    dataTable.dimension(dataDim) 
    dataTable.sortBy(function(d) { 
    return d[column]; 
    }); 
    dataTable.redraw(); 
});