我正在尝试使用多个过滤器根据选择的过滤器隐藏/显示我的数据表中的行。我的计划是将过滤器值放入一个数组中,并将它们与第一列中的data-search属性进行比较,但我目前的代码不起作用。
这里有一个带有复选框过滤器和表格数据的JSfiddle,下面是代码: https://jsfiddle.net/dmcgrew/06j4pxjk/3/
这里有一个带有复选框过滤器和表格数据的JSfiddle,下面是代码: https://jsfiddle.net/dmcgrew/06j4pxjk/3/
<label>
<input type="checkbox" name="cat" value="cat" class="filter"> Cats
</label>
<label>
<input type="checkbox" name="dog" value="dog" class="filter"> Dogs
</label>
<table class="select_items">
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Crest Allowed</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td data-search="cat">1</td>
<td>Testing Bowl</td>
<td>NO</td>
<td><button class="button">Select</button></td>
</tr>
<tr>
<td data-search="dog">32</td>
<td>Cup Test</td>
<td>NO</td>
<td><button class="button">Select</button></td>
</tr>
<tr>
<td data-search="dog">3335</td>
<td>Bowl Test</td>
<td>NO</td>
<td><button class="button">Select</button></td>
</tr>
</tbody>
</table>
The JS..
var select_items = $('.select_items').DataTable();
var filters = [];
$('input.filter').on('change', function(){
var filters = [];
$("input.filter:checked").each(function(){
var checkedBox = $(this).val();
if (filters.indexOf(checkedBox) === -1){
filters.push(checkedBox);
}
});
console.log(filters);
if(this.checked){
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex){
return (data[0].indexOf(filters) > -1) ? true : false;
}
);
}
select_items.draw();
if(this.checked){
$.fn.dataTable.ext.search.pop();
}
});