使用 multi select 下拉列表和数据表中的复选框为列应用过滤器

Question

我的问题是基于这个原文 fiddle: https://jsfiddle.net/x92c3qu2/

这是我正在寻找的一种示例。但我的问题是，当任何值具有特殊字符（例如，圆括号）时，该示例将不起作用。

这是我的代码 - 与原始代码几乎相似 link

    $('#dropdown').multiselect({
    onChange: function(element, checked) {

      var cities = $('#dropdown option:selected');

      var selected = [];
      $(cities).each(function(index, city) {
        selected.push([$(this).val()]);
      });

      var regex = selected.join("|");

      $('#table').DataTable().column(1).search(
        regex, true, false, true
      ).draw();
    }
  });
});

https://jsfiddle.net/x92c3qu2/110/ - 由我编辑 fiddle

现在，如果您 select "(Paris) France"，尽管在 table 中有记录，但它不会显示任何结果。

（尝试通过更改搜索（regax、true、false、true） - 但不起作用。

如果您 select “Paris”，它会显示与“Paris”相关的两条记录 - 根据我的说法是错的。当从下拉列表中编辑 select 值时，它应该显示准确的结果。

尝试select使用和不使用特殊字符的多个值 - 结果很奇怪。

如果需要任何进一步的说明，请告诉我。

Answer 1

如果您希望正则表达式匹配准确的字符串，您必须使用 ^ 和 $ 字符封装搜索字符串。如果字符串无论如何都必须与确切的字符串匹配，您可以禁用 search 方法中的 smart 选项。

条目 (Paris) France 有两个问题。在您的示例中，您正在推送设置为 Paris_France 的 option 元素的值，但在您的 table 中，要查找的条目仍然是（巴黎）法国，所以你应该改变它。第二个问题是 ( 是正则表达式中的一个特殊字符，在这种情况下你应该转义它，在添加值时考虑这样的事情：

selected.push(['^(' + $(this).val().replace(/[-\/\^$*+?.()|[\]{}]/g, '\$&') +')$']);

我已经根据我建议的更改编辑了您的JS fiddle。

使用 multi select 下拉列表和数据表中的复选框为列应用过滤器

Applying filter for column using multi select dropdown with checkbox in datatable

jquery

datatables

bootstrap-multiselect