jQuery DataTables:多个复选框过滤

Syl*_*ois 3 checkbox jquery filter datatables

我正在使用jQuery数据表来显示一些数据,但我知道,我想过滤那些带有多个复选框的数据.
我的表包含这个标题:Host, Type, Record, Description, Free
这些是我在数据表 之外的复选框:
类型:MX A CNAME
自由:0 1 所以在开始时我想显示所有数据.如果有人现在选中该复选框MX,它应该只显示带有类型的数据MX.如果有人检查MX,CNAME并且0,它应该只显示这些过滤器的数据.你知道我的意思?
我有一个插件可以做到这一点,但复选框在列下,我的复选框在数据表之外.

任何的想法?

mai*_*guy 9

你应该使用这个功能:

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);
}
Run Code Online (Sandbox Code Playgroud)

查看评论以了解它的作用.

从你的HTML中调用它,如下所示:

  <input onchange="filterme()" type="checkbox" name="free" value="0">0
  <input onchange="filterme()" type="checkbox" name="free" value="1">1
Run Code Online (Sandbox Code Playgroud)

Plunker是HTML和JS Snippets的测试平台,可以极大地帮助其他人了解您的问题所在,并快速响应如何解决问题.它就像html/js/css编辑器一样,可以在每个按键上呈现你的例子并且非常棒.

点击此处查看我如何解决Plunker的问题

在Plunker的左侧,您将找到我在该过程中使用的文件(index.html和script.js)

虽然这有效,并且应该让您了解如何继续,但您应该考虑使用单选按钮进行免费过滤,因为它会更有意义.

因为这是一个安静复杂的问题,如果需要更多解释,可以回复我.