Javascript 如何从 jQuery DataTable 的所有页面中选择所有复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29896599/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I select all checkboxes from all the pages in a jQuery DataTable
提问by Varun
I have HTML page which have multiple checkboxes and individually they can be checked. I have button for "Select All" and when I click on this button all the checkboxes should get selected, and when I click again on the same button all the checkboxes should get deselected from all pages.
我有 HTML 页面，其中有多个复选框，可以单独检查它们。我有“全选”按钮，当我点击这个按钮时，所有的复选框都应该被选中，当我再次点击同一个按钮时，所有的复选框都应该从所有页面中取消选择。
In my original program there are thousands of records, but at a time 10 records are getting display, but when user click on select it should select all thousands record.
在我的原始程序中有数千条记录，但一次显示 10 条记录，但是当用户单击选择时，它应该选择所有数千条记录。
I am using jQuery Datatables plug-infor displaying the data. It provides pagination, searching, sorting etc. so at a time I am displaying only 10 records on my current page. if I click on next or page number which is provided by Bootstrap Datatable another 10 records will be displayed. As mention in the problem I want to select all check-boxes from all the pages.
我正在使用jQuery Datatables 插件来显示数据。它提供分页、搜索、排序等功能，因此我在当前页面上一次只显示 10 条记录。如果我单击下一页或 Bootstrap Datatable 提供的页码，将显示另外 10 条记录。正如问题中提到的，我想从所有页面中选择所有复选框。
$(document).ready(function () {
$('body').on('click', '#selectAll', function () {
if ($(this).hasClass('allChecked')) {
$('input[type="checkbox"]', '#example').prop('checked', false);
} else {
$('input[type="checkbox"]', '#example').prop('checked', true);
}
$(this).toggleClass('allChecked');
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>monitoring</title>
<script src="jquery.js"></script>
</head>
<body>
<table id="example" class="myclass">
<thead>
<tr>
<th>
<button type="button" id="selectAll" class="main">
<span class="sub"></span> Select </button></th>
<th>Name</th>
<th>Company</th>
<th>Employee Type</th>
<th>Address</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/>
</td>
<td>varun</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Rahuk</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>johm Doe</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Sam</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Lara</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Jay</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Tom</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
</tbody>
</table>
</body>
</html>回答by Mackan
Try this code instead:
试试这个代码：
$(document).ready(function () {
var oTable = $('#example').dataTable({
stateSave: true
});
var allPages = oTable.fnGetNodes();
$('body').on('click', '#selectAll', function () {
if ($(this).hasClass('allChecked')) {
$('input[type="checkbox"]', allPages).prop('checked', false);
} else {
$('input[type="checkbox"]', allPages).prop('checked', true);
}
$(this).toggleClass('allChecked');
})
});
The magic should happen in fnGetNodes():
魔法应该发生在fnGetNodes()：
fnGetNodes(): Get an array of the TR nodes that are used in the table's body
fnGetNodes(): 获取表体中使用的 TR 节点数组
Edit
编辑
This alternative solution is mostly for debugging (to see if it works). Hardly optimal code:
这种替代解决方案主要用于调试（看看它是否有效）。几乎最优的代码：
$(document).ready(function () {
var oTable = $('#example').dataTable({
stateSave: true
});
var allPages = oTable.cells( ).nodes( );
$('#selectAll').click(function () {
if ($(this).hasClass('allChecked')) {
$(allPages).find('input[type="checkbox"]').prop('checked', false);
} else {
$(allPages).find('input[type="checkbox"]').prop('checked', true);
}
$(this).toggleClass('allChecked');
})
});
回答by Venu Duggireddy
Use datatable $ instance for selections https://datatables.net/docs/DataTables/1.9.4/#$
使用数据表 $ 实例进行选择https://datatables.net/docs/DataTables/1.9.4/#$
$(document).ready(function () {
var oTable = $('#example').dataTable({
stateSave: true
});
$("#selectAll").on("change", function(){
oTable.$("input[type='checkbox']").attr('checked', $(this.checked));
});
});
回答by Doml The-Bread
Easiest way is to use following jQuery code:
最简单的方法是使用以下 jQuery 代码：
//EDITon the second click, you now remove all checked boxes.
//在第二次单击时编辑，您现在删除所有选中的框。
$('#selectAll').click(function(e) {
if($(this).hasClass('checkedAll')) {
$('input').prop('checked', false);
$(this).removeClass('checkedAll');
} else {
$('input').prop('checked', true);
$(this).addClass('checkedAll');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>monitoring</title>
<script src="jquery.js"></script>
</head> <body>
<table id="example" class="myclass"/>
<thead>
<tr>
<th>
<button type="button" id="selectAll" class="main">
<span class="sub"></span> Select </button></th>
<th>Name</th>
<th>Company</th>
<th>Employee Type</th>
<th>Address</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/>
</td>
<td>varun</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Rahuk</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>johm Doe</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Sam</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Lara</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Jay</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Tom</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
</tbody>
</table>
</body>
</html>回答by syms
Try This,
尝试这个，
if ($(this).hasClass('allChecked')) {
$('input[type="checkbox"]').prop('checked', 'checked')
} else {
$('input[type="checkbox"]').prop('checked', 'false')
}回答by kishore cheruku
use dataTables.checkboxes.min.jsand use "selectAllPages" : false. It should be work for selection of each page records .
使用dataTables.checkboxes.min.js并使用"selectAllPages" : false. 它应该用于选择每个页面记录。
回答by kush
var oTable = $('#myTable').DataTable({
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']]
// stateSave: true
});
$('#selectAll').on('change', function() {
oTable.$('.student_id:checkbox').prop('checked', $(this).prop('checked'));
});
jQuery(document).on('change', '.student_id', function() {
if (jQuery(this).is(':checked')) {
if (jQuery('.student_id:checked').length == jQuery('.student_id').length) {
jQuery('#selectAll').prop('checked', true);
} else {
jQuery('#selectAll').prop('checked', false);
}
} else {
jQuery('#selectAll').prop('checked', false);
}
});
