DataTables：从表过滤器制作 url 查询字符串

Question

当我在表格中搜索或单击过滤器时，我想从表格中进行 url 查询以将此 url 分享给某人。

有人知道这怎么可能吗？

这是我的代码

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

获取dataTables当前状态的静态链接

var url = linkify.link()

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