Datatables精确单词搜索

Question

你好，我正在使用 datatables，我想按照一个确切的单词来筛选我的数据。

我的表格数据如下：

+-----+----------+
| num | status   |
+-----+----------+
| 1   | Active   |
+-----+----------+
| 2   | Inactive |
+-----+----------+
| 3   | Active   |
+-----+----------+

每当我搜索Active时，也会看到所有Inactive。有没有办法过滤掉这些，以便状态列只显示确切的单词。

以下是我的JS代码；

$(document).ready(function() {
    var table = $('#items').DataTable( {
    select: true,
    responsive: true
    } );
} );

我已经阅读了API，但是我无法理解它。也许我需要编写一些正则表达式？

这里有一个例子（我想是的）这里，但是我需要根据我的需求进行修改。

任何帮助或建议都将不胜感激。

- jonboy

---

请尝试使用以下链接：http://datatables.net/examples/api/multi_filter.html - Hasan Tareque

如果使用服务器端脚本编写过滤器，效果会更好。作为建议，状态“active”和“inactive”可以是数字值（0或1），通过它们进行过滤将不会产生歧义的结果。 - Marcos Pérez Gude

这是一个很好的建议，关于0和1 @MarcosPérezGude。但这是否意味着在表格中也向最终用户显示0和1？理想情况下，我希望他们看到单词“Active”和“Inactive”。它们实际上以0和1的形式存储在我的MySQL数据库中。我通过php将它们转换为字符串（Active / Inactive）并在表格中显示。 - jonboy

你也可以查看这个 -> https://dev59.com/e4nda4cB1Zd3GeqPGfkk - davidkonrad

@johnny_s 在数据库中，您可以将其保存为 int 值（0、1、2 等），并创建一个关联表与字符串值（1 = 活动，0 = 不活动，2 = 两者都等） 。当您进行筛选时，可以显示与 int 值相关的字符串值。如果您能做到这一点，datatables 不一定会呈现数字。我经常使用 jQGrid，并且它可以完美地处理此类技术。 - Marcos Pérez Gude

Answer 1

如果您觉得使用自定义筛选器会更好。每次都执行精确匹配过滤器，而不是绑定默认处理程序。unbind如果你有一个表格。

var table = $('#example').DataTable()  

然后使用精确匹配的自定义过滤器，如下所示。

$('.dataTables_filter input').unbind().bind('keyup', function() {
   var searchTerm = this.value.toLowerCase()
   if (!searchTerm) {
      table.draw()
      return
   }
   $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
      for (var i=0;i<data.length;i++) {
         if (data[i].toLowerCase() == searchTerm) return true
      }
      return false
   })
   table.draw();   
   $.fn.dataTable.ext.search.pop()
})

这里有一个演示 -> http://jsfiddle.net/hmjnqjbs/1/ 尝试搜索东京。

---

好的。我意识到问题不是关于“确切的单词”，而是更多地涉及到整个单词的搜索。我们想要在搜索vaio时看到Vaio Q900，但我们不想看到VaioQ900，因为这里的Vaio不是一个完整的单词。这个问题可以通过使用正则表达式单词边界\b来简单解决：

$('.dataTables_filter input').unbind().bind('keyup', function() {
   var searchTerm = this.value.toLowerCase(),
       regex = '\\b' + searchTerm + '\\b';
   table.rows().search(regex, true, false).draw();
})

以下是下方评论中的OP的代码更新 -> http://jsfiddle.net/hmjnqjbs/3/

现在，active，vaio等都能正常工作。

- davidkonrad

---

@johnny_s，我的错:(昨天可能太晚了 - 当searchTerm为空时，过滤器应该被“重置”（可以通过简单的draw()完成）- 已经更新了答案和小样。 - davidkonrad

@johnny_s - 我意识到我可能完全误解了你的问题。您不想要一个完全匹配 - 您只想搜索整个单词并避免复合词。如果是这样，就不需要自定义过滤器，请查看更新的答案和您的fiddle更新-> http://jsfiddle.net/hmjnqjbs/3/ - davidkonrad

Answer 2

要使用精确匹配筛选搜索结果，可以这样做 -

table.column(index).search("^" + searchText + "$", true, false).draw();

更多信息 - https://dev59.com/kHfZa4cB1Zd3GeqPR3eR#19114759

- Aamol

Answer 3

希望这可以帮到您。在两端添加'\\b'将只让表格搜索整个单词。

var regex = '\\b' + searchKey + '\\b';
<yourDataTable>.columns(<columnIndex>).search( regex, true, false).draw();

- Sajeer Babu