如何从 jQuery DataTable 的所有页面中选择所有复选框 [英] How can I select all checkboxes from all the pages in a jQuery DataTable
问题描述
我有 HTML 页面，其中有多个复选框，可以单独检查它们.我有全选"按钮，当我点击这个按钮时，所有的复选框都应该被选中，当我再次点击同一个按钮时，所有的复选框都应该从所有页面中取消选择.
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.
在我原来的程序中有数千条记录，但一次显示 10 条记录，但是当用户点击选择时，它应该选择所有数千条记录.
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.
我使用 jQuery 数据表插件来显示数据.它提供分页、搜索、排序等功能，因此我在当前页面上一次只显示 10 条记录.如果我单击下一页或 Bootstrap Datatable 提供的页码，将显示另外 10 条记录.正如问题中提到的，我想从所有页面中选择所有复选框.
I am using jQuery Datatables plug-in for 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.
$(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>推荐答案
试试这个代码:
$(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');
})
});
魔法应该发生在fnGetNodes():
fnGetNodes():获取表体中使用的TR节点数组
fnGetNodes(): Get an array of the TR nodes that are used in the table's body
编辑
这个替代解决方案主要用于调试(看看它是否有效).几乎不是最优的代码:
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');
})
});
这篇关于如何从 jQuery DataTable 的所有页面中选择所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
