jQuery DataTables:多个复选框过滤 [英] jQuery DataTables: Multiple checkbox filtering

问题描述

我使用jQuery数据表只是为了显示一些数据，但是我想过滤具有多个复选框的那些数据.
我的表包含此标题:Host, Type, Record, Description, Free
这些是我在数据表之外的复选框:
类型:MX A CNAME
免费:0 1 因此，一开始我要显示所有数据.如果现在有人选中了复选框MX，则该复选框仅应显示类型为MX的数据.如果有人检查MX，CNAME和0，则仅应显示具有这些过滤器的数据.你知道我的意思吗?
我有一个可以执行此操作的插件，但是复选框位于列下方，而我的复选框位于数据表之外.

I'm using jQuery datatables just to display some data, but know, i want to filtering those with multiple checkboxes.
My table contains this header: Host, Type, Record, Description, Free
And these are my checkboxes outside of the datatable:
Type: MX A CNAME
Free: 0 1 So at the begining I want to show all of the data. If someone now checks the checkbox MX, it should only show data with type MX. If someone checks MX, CNAME and 0, it should only show data with these filters. You know what I mean?
I've a plugins which can do this, but the checkboxes are under the columns, my checkboxes are outside the datatable.

有什么主意吗?

推荐答案

您应使用此功能:

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);
}

查看评论以查看其作用.

Look at the comments to see what it does.

像这样从您的html调用它:

Call it from your html like this:

  <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 is a testbed for HTML and JS Snippets that greatly helps others to understand where your issue is located and to give a fast response on how to fix things. It simply works like html/js/css editor that renders your example on every keypress and is awesome.

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

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

On the left side of the Plunker you will find the files I used in the process (index.html and script.js)

虽然这可行，并且应该为您提供继续操作的思路，但您应该考虑对FREE过滤器使用单选按钮，因为这样做更有意义.

While this works and should give you an idea on how to continue, you should think about using radio buttons for the FREE filter, because it would make more sense.

由于这是一个安静而复杂的问题，如果需要更多解释，请回到我身边.

Since this is a quiet complicated issue come back to me if something needs more explanation.

这篇关于jQuery DataTables:多个复选框过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！