时间戳

首页 > 解决方案 > 每列中的 DataTables 全局正则表达式搜索

javascript - 每列中的 DataTables 全局正则表达式搜索

问题描述

我想实现一个功能，您可以在其中开始搜索字符串，$以便在所有可搜索列中进行 startsWith 搜索。这是我迄今为止尝试过的：

$('#myinput').on('keyup', (event) => {
    let searchValue = $(event.currentTarget).val();        
    if (searchValue.startsWith('$')) {
        searchValue = `^${searchValue.substr(1)}`;
    }
    this.dataTable.search(searchValue, true, false, false).draw();
});

但显然，这只在第一列中搜索。如果我不在^搜索中使用，它会搜索所有列。如何检查是否有任何列以myValue而不是整个行数据开头？

可以在https://datatables.net/examples/api/regex.html上复制。启用全局正则表达式并搜索 ^Airi，然后搜索 ^Accountant。

您将获得 Airi 的结果，但不会获得 Accountant 的结果。

我怎样才能使搜索^Accountant仍然显示第一个条目，因为第二列以 Accountant 开头？

标签： javascriptjquerydatatables

解决方案

发生这种情况是因为当全局正则表达式设置为true它将整行视为文本。因此，您的搜索应如下所示：

$('#myinput').on('keyup', (event) => {
    let searchValue = $(event.currentTarget).val();        
    if (searchValue.startsWith('$')) {
        searchValue = `\b${searchValue.substr(1)}`;
    }
    this.dataTable.search(searchValue, true, false, false).draw();
});

正则表达式令牌\b代表“边界”。每个单词的开头都会创建一个新边界（这里是正则表达式规范：https ://regex101.com/r/s0MdwW/1 ）。您还可以通过搜索“\bTok”来尝试它在 Datatables 网站中的工作原理，这应该会显示“Airi”。

但请注意，有一个问题：搜索“Sat”将匹配“Airi Satou”，因为单词之间存在边界。如果您想避免这种特殊情况，那么您只需要执行^正则表达式搜索（如您当前的代码），但对于每一列，然后收集所有结果。每列正则表达式搜索仅使用列内容进行匹配：

在此处输入图像描述

更新：好的，所以每列搜索肯定比预期的更复杂，因为简单地搜索每列会创建一个 AND 搜索。例如，搜索“Airi”还需要“Airi”在所有其他列中。

为了解决这个问题，必须构建一个自定义搜索功能。在这里你可以找到它：https ://codepen.io/adelriosantiago/pen/XWKGoLx?editors=1011

此自定义函数 OR 使用该函数搜索列$.fn.dataTable.ext.search.push。

推荐阅读