DataTables:从表过滤器生成url查询字符串 [英] DataTables: Make url query string from table filter

问题描述

当我搜索或单击表中的过滤器时，我想从表中进行URL查询以将该URL共享给某人.

When I search or clicked filter in a table, I want to make url query from table to share this url to someone.

有人知道这怎么可能吗?

Does somebody know how this is possible?

这是我的代码

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

});

推荐答案

dataTables仅具有内置功能，可以在本地(即在localStorage/sessionStorage中)保存表的状态.如果要传递URL或链接，则必须首先能够构建要传递的URL/链接，然后使您的页面能够根据在该URL/链接中传递的参数来恢复" dataTable.

dataTables has only built-in ability to save the state of a table locally, i.e in the localStorage / sessionStorage. If you want to pass an URL or link you must first be able to build an URL / link to pass, then make your page able to "restore" the dataTable based on the params passed in that URL / link.

这是一个非常简单但有效的解决方案.可以通过

Here is an extremely simple but yet working solution that are doing just that. It makes it possible to pass a static link to a user on the form

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

，然后页面上的dataTable将还原为在x上进行过滤，显示页面3.

and then the dataTable on the page will be restored to be filtering on x, showing page 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当前状态的静态链接

To get a static link of the dataTables current state

var url = linkify.link()

如上所述，上面的代码仅包含searchstring/filter和page.但是使用ajax URL，页面长度，当前排序的列等进行扩展非常容易，因为它利用了dataTables 1.10.x的get/set方法.

As mentioned only searchstring / filter and page is included in the code above. But it is extremely easy to extend with ajax URL, page-length, current sorted column etc since it is taking advantage of the dataTables 1.10.x get / set methods.

这篇关于DataTables:从表过滤器生成url查询字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！