DataTables:从表过滤器创建url查询字符串

Question

当我在表格中搜索或点击过滤器时,我想从表格中进行网址查询,以便将此网址分享给某人.

有人知道这有可能吗？

这是我的代码

$("#example").dataTable({
        "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        "iDisplayLength": -1,
        "fnStateSave": function(oSettings, oData) {
            localStorage.setItem('DataTables_' + window.location.pathname, JSON.stringify(oData));
        },
        "fnStateLoad": function(oSettings) {
            return JSON.parse(localStorage.getItem('DataTables_' + window.location.pathname));
        },
        "fnStateSaveCallback": function(){

        }
    }).columnFilter({
        sPlaceHolder: "foot:after",
        aoColumns: [
            {type: "text", bSmart: true},
            {type: "select", values: ['YearEnd', 'Quarter']},
            {type: "number-range"},
            {type: "number-range"},
            {type: "number-range"},
            {type: "number-range"},
            {type: "number-range"},
            {type: "number-range"},
            {type: "number-range"},
            {type: "number-range"},
            {type: "number-range"},
            {type: "number-range"},
            {type: "number-range"},
            {type: "number-range"},
            {type: "number-range"}
        ]
    });

});

Answer 1

dataTables 仅具有在本地保存表状态的内置功能，即在 localStorage / sessionStorage 中。如果你想传递一个 URL 或链接，你必须首先能够构建一个 URL/链接来传递，然后让你的页面能够根据在该 URL/链接中传递的参数“恢复”数据表。

这是一个非常简单但有效的解决方案，可以做到这一点。它可以将静态链接传递给表单上的用户

http://mywebsite.com?dtsearch=x&dtpage=3

然后页面上的dataTable将恢复为过滤x，显示页面3。

var DataTablesLinkify = function(dataTable) {
    this.dataTable = dataTable;
    this.url = location.protocol+'//'+location.host+location.pathname;
    this.link = function() {
        return this.url +
            '?dtsearch='+this.dataTable.search() +
            '&dtpage='+this.dataTable.page();
            //more params like current sorting column could be added here
    }
    //based on http://stackoverflow.com/a/901144/1407478
    this.getParam = function(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    this.restore = function() {
        var page = this.getParam('dtpage'), 
            search = this.getParam('dtsearch');
        if (search) this.dataTable.search(search).draw(false);
        if (page) this.dataTable.page(parseInt(page)).draw(false);
        //more params to take care of could be added here
    }
    this.restore();
    return this;
};

用法 ：

var table = $('#example').DataTable(),
    linkify = DataTablesLinkify(table);

获取数据表当前状态的静态链接

var url = linkify.link()

如上所述，上面的代码中仅包含搜索字符串/过滤器和页面。但是使用 ajax URL、页面长度、当前排序列等进行扩展非常容易，因为它利用了 dataTables 1.10.x 的 get/set 方法。