按列重新排序数据表

Question

我想知道是否有任何已知方法可以有效地在dc.js中为我的数据表添加"重新排序"功能.如果我的用户在完成对图表的选择后,可以根据哪个列来决定过滤行的排序(例如,通过单击列标题),那将是很好的.

任何想法从哪里开始？

非常感谢

Answer 1

我喜欢使用JQuery数据表: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 dataTable。唯一重要的是列配置。使用不会动态创建标题的格式

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