jQuery DataTables：多选框过滤

Question

我正在使用jQuery datatables来展示一些数据，但现在我想用多个复选框来过滤这些数据。
我的表格包含以下标题：主机、类型、记录、描述、Free
这是我在datatable外的复选框：
类型: MX A CNAME
Free: 0 1 所以一开始我想显示所有的数据。如果有人现在勾选了MX复选框，它应该只显示类型为MX的数据。如果有人勾选了MX、CNAME和0，它应该只显示这些过滤器的数据。你知道我的意思吗？
我有一个插件可以做到这一点，但是复选框在列下面，而我的复选框在datatable外面。

- Sylnois

---

在我开始之前：您是否在此使用服务器端处理？如果没有，能否准备一个 plunker？ - mainguy

@mainguy 不是的，我没有使用服务器端处理。什么是 plunker？ - Sylnois

Answer 1

你应该使用这个函数：

function filterme() {
  //build a regex filter string with an or(|) condition
  var types = $('input:checkbox[name="type"]:checked').map(function() {
    return '^' + this.value + '\$';
  }).get().join('|');
  //filter in column 0, with an regex, no smart filtering, no inputbox,not case sensitive
  otable.fnFilter(types, 0, true, false, false, false);

  //build a filter string with an or(|) condition
  var frees = $('input:checkbox[name="free"]:checked').map(function() {
    return this.value;
  }).get().join('|');
  //now filter in column 2, with no regex, no smart filtering, no inputbox,not case sensitive
  otable.fnFilter(frees, 2, false, false, false, false);
}

查看评论以了解其作用。

像这样从您的html中调用它：

  <input onchange="filterme()" type="checkbox" name="free" value="0">0
  <input onchange="filterme()" type="checkbox" name="free" value="1">1

Plunker是一个HTML和JS片段的测试平台，它非常有助于他人了解您的问题所在并快速响应如何解决问题。它简单地像HTML/JS/CSS编辑器一样工作，在每次按键时呈现您的示例，并非常棒。

点击此处查看我如何通过Plunker修复您的问题

在Plunker的左侧，您将找到我在过程中使用的文件（index.html和script.js）

虽然这很有效，可以让您了解如何继续，但您应该考虑为“FREE（免费）”筛选器使用单选按钮，因为这更有意义。

由于这是一个相当复杂的问题，如果需要更多的解释，请回到我这里。

- mainguy

---

我在使用 free 函数时遇到了问题。我的记录中包含了值为 0 或 1 的数据，所以它也将它们显示出来了。 - Sylnois

看看这个 Plunker，它使用了更为合乎逻辑的单选按钮：http://plnkr.co/edit/45hOwYG13VAooKfPPAw3?p=preview - mainguy

嗯，我明白了。那么你应该只在相应的列中过滤空闲。在我的例子中，使用2作为过滤列，这是你代码中的记录列。在此行中限制到第4行（从零开始计数）：otable.fnFilter(frees, 4, false, false, false, false); - mainguy

免费的话，我只需要一个复选框（0或1），我已经将列更改为4了...但它仍然过滤了该列的其余部分。 - Sylnois

感谢分享，我想要一个具有多个复选框过滤器的jQuery数据表格，作为TH（标题）的下拉菜单。这对我很有效，再次感谢 :) - Kushal Jayswal