我有一个表,有大量的记录在数据表的帮助下分页.第一个标题列是全选复选框,每行都有自己的复选框. 我想在我的表中有以下功能: 1)用户可以在表格中导航并随机选择/取消选中复选框
我想在我的表中有以下功能:
1)用户可以在表格中导航并随机选择/取消选中复选框.
2)单击thead中的“全选”复选框应仅选中/取消选中所有当前可见的记录.
3)“全选”按钮应保持不同数据表页面的状态(已选中/未选中).例如. – 如果用户单击第1页上的全选并导航到下一页,则应取消选中全选复选框,再次单击它将仅检查此页面中的所有行,而先前选中的复选框不受影响.
到目前为止,我有以下代码来处理检查选择:
$('#selectAllCheck').click(function(e) { var chk = $(this).prop('checked'); var currentRows = $('#myTable tbody tr'); $.each(currentRows, function(){ $(this).find(':checkbox[name=statusCheckbox]').each(function(){ $(this).prop('checked', chk); }); }); });
我知道_(‘tr’,{“过滤器”:“应用”});功能,但它只是将所有行返回给我.我不知道为什么.
我已经用上面的代码实现了(1)和(2),它工作正常.唯一的问题是不同页面上“全选”功能的行为.我抬头看着datatables.net但找不到与此有关的任何内容.
这是我最终实现我的要求.虽然不完美,但这段代码很好地实现了datatable中的“select all”列.$(document).ready(function() { oTable = $('#mytable').dataTable({ "bJQueryUI" : true, "sPaginationType" : "full_numbers", "fnDrawCallback": function( settings ) { //managing the "Select all" checkbox // everytime the table is drawn, it checks if all the //checkboxes are checked and if they are, then the select all // checkbox in the table header is selected var allChecked = true; $('#mytable tbody tr').each(function() { $(this).find(':checkbox[name=statusCheckbox]').each(function(){ if (!$(this).is(':checked')) { allChecked = false; } }); }); $('#selectAllCheck').prop('checked', allChecked); }, }); // This is to stop datatable to sort the column on checking the checkbox $('thead').click(function(e){ if (e.target.type == 'checkbox') { e.stopPropogation(); } }); // Click handler for select all checkbox that checks the rows on current view only $('#selectAllCheck').click(function(e) { var chk = $(this).prop('checked'); var currentRows = $('#mytable tbody tr'); $.each(currentRows, function(){ $(this).find(':checkbox[name=statusCheckbox]').each(function(){ $(this).prop('checked', chk); }); }); });
});