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。如果您想传递网址或链接，您必须首先能够构建要传递的网址/链接，然后让您的网页能够恢复＆＃34; dataTable基于该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()

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

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

1 个答案: