根据复选框过滤表 [英] Filtering a table based on checkboxes
本文介绍了根据复选框过滤表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有下表
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="OutputTable>
<tbody id="tableData">
<tr>
<td><input type="checkbox"></td>
<td>Sometext</td>
<td>Sometext</td>
<td>Sometext</td>
<td>Sometext</td>
<td>Sometext</td>
<td>Sometext</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Sometext</td>
<td>Sometext</td>
<td>Sometext</td>
<td>Sometext</td>
<td>Sometext</td>
<td>Sometext</td>
</tr>
</tbody>
<tfoot>
<tr id="filterRow">
<th><input type="checkbox"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
我希望页脚中的复选框充当过滤器;当它被选中时,我只希望显示所有带有其复选框的行.如果未选中页脚复选框,我希望所有行都显示.
I want the checkbox in the footer to act like a filter; when it is checked i only want all rows with their checkbox to show. When the footer checkbox is not checked i want all rows to show.
我尝试了不同的方法,但无法正常工作.感谢您的帮助!
I tried different things but i cant get it to work. Any help is appreciated!
推荐答案
有关代码和演示,请参见下面的示例.
See the example below for code and demonstration.
$(document).ready(function() {
var table = $('#example').DataTable({
'ajax': 'https://api.myjson.com/bins/1us28',
'columnDefs': [
{
'targets': 0,
'className': 'dt-body-center',
'render': function(data, type, row){
if(type === 'display'){
data = '<input type="checkbox" value="' + $('<div>').text(data).html() + '">';
}
return data;
}
}
],
'order': [[1, 'asc']]
});
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input[type="checkbox"]', this.footer() ).on( 'change', function (e) {
var values = '';
if(this.checked){
$.each(table.column(0).$('input:checked'), function(index, el){
var value = $.fn.dataTable.util.escapeRegex(el.value);
values += ((values !== '') ? '|' : '') + value;
});
values = '^(' + values + ')$';
}
that.search(values, true, false).draw();
});
});
// Handle checkbox change event to exclude the row if column is being filtered
$('#example').on( 'change', 'tbody input[type="checkbox"]', function (e) {
var td = $(this).closest('td');
var col = table.cell(td).index().column;
// If column is being filtered
if(table.column(col).search() !== ''){
// Trigger change event to exclude the row
$( 'input[type="checkbox"]', table.column(col).footer()).trigger('change');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.js"></script>
<link href="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.css" rel="stylesheet"/>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th><input type="checkbox"></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
这篇关于根据复选框过滤表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文