javascript - 使用 JQuery 使用逗号分隔的多个值过滤 HTML 表

Question

我有一个过滤器代码，如果我给出单个值，它可以正常工作，但是我的表中有超过 100 个值，并且我必须同时搜索表中的两个或三个值，所以我计划为此使用逗号，就像在单个搜索框中一样，我将以逗号分隔的方式在表列中写入必须搜索的值。

目前它正在工作，但当我给出逗号时它不会过滤，因为我是这个脚本和网络开发的新手，任何人都可以帮助我。

$('#tblfiles').dataTable({
  "search": {
    "smart": true,
    "regex": true
  }
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<div id="nam"></div>
<br>

<table id="tblfiles">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Country</th>
      <th>StDID</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>pooe</td>
      <td>country1</td>
      <td>Sgyt13</td>
    </tr>
    <tr>
      <td>2</td>
      <td>AAA</td>
      <td>country2</td>
      <td>P5372</td>
    </tr>
    <tr>
      <td>3</td>
      <td>BBB</td>
      <td>country3</td>
      <td>P5972</td>
    </tr>
  </tbody>
</table>

所以在这里我必须获取包含名称为 AAA 和 BBB 的行，因此在搜索栏中我必须给出 AAA、BBB ..，以便逐一搜索和获取值，这样它将获取两个相应的行我。

所以这里它替换了第一个％，但不替换第二个

Answer 1

使用正则表达式搜索

DataTables Search Option支持正则表达式作为搜索输入。 如果您禁用smart search ，并且仅启用 regex search ，您可以使用正则表达式语法在表中查找多个值。

这可能对您有用，因为您可以查找多个值，如下所示:country1|country2

$('#tblfiles').dataTable({
  'search': {
    'smart': false,
    'regex': true
  }
});

精确匹配

如果您搜索country1|country2，表格将查找包含country1或country2<的所有项目。使用 ^ 和 $ 指定匹配位置，无法按预期与 dataTables 配合使用。

如果你想让country1|country2返回精确匹配，模拟^ and $ use ，您可以用 \\b 包裹搜索词，在本例中，其工作方式类似于 ^ 和 $。

// exact match
const regex = '\\b(' + searchTerm + ')\\b';

使用逗号作为分隔符

如果您想使用逗号作为分隔符，而不是正则表达式的默认 |，则可以使用相同的函数将搜索词中的所有逗号替换为管道。这样，您的用户将使用逗号同时搜索多个术语，而不是 |:

// comma delimiter
const searchTerm = this.value.toLowerCase().replace(/,/g, '|');

示例(启用精确匹配)

• 搜索: 国家/地区1、国家/地区2
• 结果:将专门返回country1和country2

---

• 搜索: 国家/地区[1-2][0-9]
• 结果:将返回国家/地区 10 和国家/地区 29 之间的所有国家/地区

---

• 搜索: o.*
• 结果: 将返回包含以 o 开头的字符串的所有行。如果不添加 .*，搜索将查找与 o(被非单词的内容包围)完全匹配的内容，并且不会返回任何内容。

主要区别在于搜索正则表达式是严格还是宽松

const table = $('#tblfiles');

/* NOT IMPORTANT FOR ANSWER */
/* This is here just to generate data in the table */
const tableBody = table.find('tbody');
for (const x of Array(100).keys()) {
  tableBody.append(`<tr>
  <td>${ x }</td>
  <td>${ chance.name() }</td>
  <td>country${ x }</td>
  <td>${ chance.string({ length: 4, alpha: true, numeric: true }) }</td>
  </tr>`)
}
/* ANSWER CONTINUE HERE */


$('#tblfiles').dataTable({
  'search': {
    'smart': false,
    'regex': true
  }
});

// This is used to force the search value to search whole words.
// This makes sure that searching for `country1|country2` will
// still find an exact match
$('.dataTables_filter input').unbind().bind('keyup', function() {
  const searchTerm = this.value.toLowerCase().replace(/,/g, '|');
  const regex = '\\b(' + searchTerm + ')\\b';
  table.DataTable().rows().search(regex, true, false).draw();
});

body {
  font-size: 12px !important;
  padding: 2em;
}

.dataTables_length {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.1.7/chance.min.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<div id="nam"></div>
<br>

<table id="tblfiles" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Country</th>
      <th>StDID</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>