修改数据表搜索功能

问题描述

如果我在搜索输入中输入两个由空格“abc xyz”分隔的字符串，数据表会找到包含这两个字符串的行。

1 abc001 John London xyz
2 abc001 Mary NYC xyz

我想找到所有包含 abc 的行和所有包含 xyz 的行。

1 abc001 John London xyz
2 abc001 Mary NYC xyz
3 abc002 Susan LA qpr
4 xyz001 Peter Paris efg
5 xyz002 Michael Chicago efg

基本上……当我添加字符串时，我正在扩大搜索范围。请注意，第 3 行没有 xyz，第 4 行或第 5 行没有 abc。

我有一个单独的搜索功能可以做到这一点。事实上，它也可以排除。所以我可以搜索包含多个字符串的 html 表并排除一些字符串

function myFunctionS() {
  var input,filter,table,tr,td,i,txtValue;
  input = document.getElementById("myInputS");
  inputExclude = document.getElementById("myInputExcludeS");
  filter = input.value.toupperCase();
  filterExclude = inputExclude.value.toupperCase();
  table = document.getElementById("example");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      txtValue = txtValue.toupperCase()
      let match = true
      let f = true // add this line
      filter.split(' ').forEach(q => {
        if(q && q.length > 0) {
          // and add these lines
          if(f) {
            match = false
            f = false
          }
          match = match || txtValue.indexOf(q) > -1  /// only change && instead ||
        }
     })
      filterExclude.split(' ').forEach(q => {
        if(q && q.length > 0)
          match = match && txtValue.indexOf(q) == -1
      })
      if (match) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }

输入字段如下：

<input type="text" id="myInputS" onkeyup="debounce(myFunctionS(),500)" placeholder="Search for names..">
<input type="text" id="myInputExcludeS" onkeyup="debounce(myFunctionS(),500)" placeholder="Exclude names.."/>

所以我可以搜索“abc xyz”但排除芝加哥，结果是。

1 abc001 John London xyz
2 abc001 Mary NYC xyz
3 abc002 Susan LA qpr
4 xyz001 Peter Paris efg

这是一个很棒的功能，但它不适用于数据表。我必须将超过一千行的 html 表加载到一个页面中，没有分页。然后这个搜索功能很好用。如果我尝试在数据表分页表上使用它，它只会找到第一页上的内容，并且分页会因结果而变得不正常。

有没有办法将此搜索/排除集成到数据表中或至少修改数据表搜索，以便它可以找到至少包含多个搜索字符串之一的任何行。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

datatables html javascript jquery