按列重新排序数据 [英] Reorder datatable by column

问题描述

我想知道是否有任何已知方法可以向dc.js的数据表中有效添加重新排序功能。如果我的用户在对图表进行选择之后，可以决定应按哪一列对已过滤的行进行排序（例如，通过单击列标题），那将是很好的选择。

I was wondering if there is any known way to efficiently add a "Reorder" feature to my datatables in dc.js. It would be great if my users, after having done their selection with the charts, could decide according to which column the filtered rows should be ordered (by clicking on the column header for example).

任何想法从哪里开始？

非常感谢

推荐答案

我喜欢为此使用JQuery数据表： http://datatables.net/

I like to use JQuery datatables for this: 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>

下一步，像通常一样构建尺寸：

Next build your dimensions like normal:

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

然后绑定jquery数据表：

Then bind the jquery data table:

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中：

Finally, hook it into dc.js if you want the table to reflect the filters of your other charts:

        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/

Here is a jsFiddle that demonstrates this: http://jsfiddle.net/djmartin_umich/d55My/

这篇关于按列重新排序数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！