【发布时间】:2021-03-09 06:11:18
【问题描述】:
由于我使用 dataTables 并将其放在 <form> 中以将数据传递给服务器,我发现我无法将每页内的所有数据都传递,因为其他元素 <td> 被隐藏,因此能够全部发送到数据库我需要根据show entities 10 - 100 对它们进行排序。但我想做的是这个。如果我单击复选框以选中该特定页面上的所有复选框,则不应选择其他页面中的其他复选框。我该怎么做?有任何想法吗?提前感谢您的帮助。
这是代码示例
//Selecting all checkboxes that are not disabled
$("#select_all").on('click', function() {
$('#dataTables').DataTable()
.column(3)
.nodes()
.to$()
.find('input[type="checkbox"]:enabled')
.prop('checked', this.checked);
});
// Sorting of column in dataTables
$(document).ready(function() {
$("#dataTables").DataTable();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" integrity="sha512-ARJR74swou2y0Q2V9k0GbzQ/5vJ2RBSoCWokg4zkfM29Fb3vZEQyv0iWBMW/yvKgyHSR/7D64pFMmU8nYmbRkg==" crossorigin="anonymous"
/>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js" integrity="sha512-yDlE7vpGDP7o2eftkCiPZ+yuUyEcaBwoJoIhdXv71KZWugFqEphIS3PU60lEkFaz8RxaVsMpSvQxMBaKVwA5xg==" crossorigin="anonymous"></script>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
Sample
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table width="100%" id="dataTables" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>
<center>
Select
<input type="checkbox" id="select_all">
</center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>
<center>
<input type="checkbox" id="select_all">
</center>
</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td>
<center>
<input type="checkbox" id="select_all">
</center>
</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td>
<center>
<input type="checkbox" id="select_all">
</center>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
</div>
【问题讨论】:
标签: javascript jquery ajax datatables datatables-1.10