我正在使用jQuery数据表来显示一些数据,但是我知道,我想过滤那些带有多个复选框的数据。
我的表格包含此标题:Host, Type, Record, Description, Free
这些是我在数据表之外的复选框:
输入:MX
A
CNAME
免费:0
1
所以在开始时我想显示所有数据。如果有人现在选中了MX
复选框,则只应显示类型为MX
的数据。如果有人检查MX
,CNAME
和0
,则应仅显示包含这些过滤条件的数据。你知道我的意思吗?
我有一个插件可以做到这一点,但复选框在列下,我的复选框在数据表之外。
有什么想法吗?
答案 0 :(得分: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);
}
查看评论以了解它的作用。
从你的HTML中调用它:
<input onchange="filterme()" type="checkbox" name="free" value="0">0
<input onchange="filterme()" type="checkbox" name="free" value="1">1
Plunker是HTML和JS Snippets的测试平台,可以极大地帮助其他人了解您的问题所在,并快速响应如何修复问题。它就像html / js / css编辑器一样,可以在每个按键上呈现你的例子并且非常棒。
Click here to see how I fixed your issue with Plunker
在Plunker的左侧,您将找到我在此过程中使用的文件(index.html和script.js)
虽然这有效并且应该让你知道如何继续,但你应该考虑使用免费过滤器的单选按钮,因为它会更有意义。
由于这是一个安静复杂的问题,如果需要更多解释,请回复我。