JQuery 数据表 SearchPane 过滤器值答案

【问题标题】：JQuery Datatables SearchPane Filter ValueJQuery 数据表 SearchPane 过滤器值
【发布时间】：2020-05-09 00:10:02
【问题描述】：

我正在使用 Datatables 的 SearchPanes 扩展，我试图在他们选择的 SearchPane 中捕获项目的值，似乎由于 SearchPanes 使用 filter() 而不是 search()，所以该值不可用。我错了吗？

【问题讨论】：

标签： datatables

【解决方案1】：

您可以按如下方式访问选择：

1) 将stateSave: true 添加到DataTable 初始化定义中。见this example。

这将导致所有选择都保存在浏览器的local storage中。

2) 使用以下逻辑访问浏览器的本地存储：

var myStorage = window.localStorage;
var searchPanes = JSON.parse(myStorage.getItem('yourStorageIndexGoesHere'));
//console.log(searchPanes); // the full JSON - large!
//console.log(searchPanes['searchPanes']['panes']); // one object per search pane
searchPanes['searchPanes']['panes'].forEach(function(pane) { 
  console.log('ID = ' + pane.id + ' - selected: ' + pane.selected); 
});

就我而言，我使用了this demo 中显示的搜索窗格。

这是一个带有一些选择的屏幕截图：

以下是上述选择的示例代码写入浏览器控制台的内容：

“ID”数据值是从零开始的列索引。因此，第 3 列（索引 2）是 Office 列，第 6 列（索引 5）是 Salary 列。

相关的“选定”数据是数组，包含一个或多个值。您可以迭代数组以获取每个单独的值。

您需要将yourStorageIndexGoesHere 替换为您的存储条目的实际名称。找到它的最简单（手动）方法是使用 SearchPanes 执行过滤器，然后打开浏览器工具（通常是 F12）。然后（假设在我的情况下为 FireFox）导航到 Storage > Local Storage > 并选择相关的关键文本。

注意事项：

a) 这假设您可以激活“本地存储”功能。这意味着浏览器将记住上次应用的过滤器，并在用户返回到 DataTable 浏览器页面时重新应用它。如果用户不想要该功能，那么我的解决方案将不适合您。

b) 我无法建议您将我提供的 JavaScript 放在哪里，因为我不知道您想如何处理这些信息。但是，例如，您可能希望在每个 draw() 事件之后使用它 - 在这种情况下，see here。

【讨论】：

谢谢安德鲁，这正是我所需要的。我完全忽略了本地存储，就像你说的，它将进入 .draw() 事件处理程序。

【解决方案2】：

Jsut 想要添加，如何按需删除搜索模式或预选的 searchPanes 过滤器 - 是否启用了 stateSave。

.on( 'stateLoadParams.dt', function (e, settings, data) {
                    //get the last search pattern, if this setting is enabled
                    //if not, erase last search
                    if (!cnf_lastSearch) {
                        //erase search input field
                        data.search.search = '';
                        data.start = 0;
                        //console.log(data)
                    } else {

                    }
                    //search through search panes array and erase content
                    if (!cnf_searchPanes) {
                        $.each((data['searchPanes']['panes']), function( i, val ) {
                          val.selected = '';
                        });
                    }
            })

【讨论】：