DataTables：从表filter中创建url查询字符串

当我在表格中搜索或点击filter时，我想从表格中进行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只具有在本地保存表状态的内置function，即在localStorage / sessionStorage中。 如果您想传递URL或链接，您必须首先能够构建要传递的URL /链接，然后使您的页面能够根据该URL /链接中传递的参数“恢复”dataTable。

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

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方法。