Crossfilter 按列对数据表重新排序

我想知道是否有任何已知的方法可以有效地将“重新排序”功能添加到dc.js中的数据表中。如果我的用户在对图表进行了选择之后，能够根据过滤后的行的顺序来决定（例如，通过单击列标题），那就太好了

你知道从哪里开始吗

---

非常感谢

我喜欢使用JQuery数据表来实现这一点：

首先添加表格和标题行：

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

然后绑定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);
        }

函数刷新表（）{
dc.events.trigger（函数（）{
alldata=countryDimension.top（无限大）；
datatable.fnClearTable（）；
datatable.fnAddData（alldata）；
datatable.fnDraw（）；
});
}
对于（var i=0；i

---

下面是一个JSFIDLE，它演示了这一点：

这里是另一个只使用标准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>

然后，只需将click事件处理程序附加到列标题，并使用DC.js对表进行排序。编辑-还必须更改维度，以便排序方式对所有数据进行排序，而不仅仅是显示的数据

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

---

我希望当我发现这一点时，我所有的问题都得到了解决：但它并没有那么喜欢dcjs……非常感谢！它看起来和我需要的一模一样，我会尽快试一试！一个问题是：如果重置所有过滤器>dc.filterAll（）；dc.redrawAll（）；RefreshtTable（）执行了很多次，因此执行速度非常慢。一个非常好和简单的解决方案+1.

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

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