重新排序的数据表通过

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