如何使用jQuery DataTables提交所有页面中的复选框
如何使用jQuery DataTables提交所有页面中的复选框
提问于 2015-10-20 23:15:22
我尝试获取每一行的第一个单元格(td)，但只针对当前页面。如果我导航到下一页，则不会发送上一页上选中的复选框。
<table class="table" id="example2">
<thead><tr>
<th>Roll no</th><th>Name</th></tr><thead>
<?php
$sel = "SELECT * FROM `st`";
$r = mysqli_query($dbc, $sel);
while ($fet = mysqli_fetch_array($r)) {
?>
<tr>
<td><?php echo $fet['trk'] ?></td>
<td><input type="text" value="<?php echo $fet['ma'] ?>" id="man" class="form-control"></td>
<td><input type="checkbox" id="check" name="myCheckbox" class="theClass"></td></tr>
<?php } ?>
</table>
<input type="submit" id="sub_marks" class="btn btn-info" value="Submit & Continue">
<script src="plugins/datatables/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
})
});
</script>
<script>
$('#sub_marks').click(function () {
var values = $("table #check:checked").map(function () {
return $(this).closest("tr").find("td:first").text();
}).get();
alert(values);
})
</script>回答 4
Stack Overflow用户
发布于 2015-10-20 23:41:58
原因
出于性能原因，jQuery DataTables从DOM中删除了不可见的行。提交表单时，仅将可见复选框的数据发送到服务器。
解决方案1.提交表单
在提交表单时，需要将选中的、不存在于DOM中的元素<input type="checkbox">转换为<input type="hidden">。
var table = $('#example').DataTable({
// ... skipped ...
});
$('form').on('submit', function(e){
var $form = $(this);
// Iterate over all checkboxes in the table
table.$('input[type="checkbox"]').each(function(){
// If checkbox doesn't exist in DOM
if(!$.contains(document, this)){
// If checkbox is checked
if(this.checked){
// Create a hidden element
$form.append(
$('<input>')
.attr('type', 'hidden')
.attr('name', this.name)
.val(this.value)
);
}
}
});
});解决方案2:通过Ajax发送数据
var table = $('#example').DataTable({
// ... skipped ...
});
$('#btn-submit').on('click', function(e){
e.preventDefault();
var data = table.$('input[type="checkbox"]').serializeArray();
// Include extra data if necessary
// data.push({'name': 'extra_param', 'value': 'extra_value'});
$.ajax({
url: '/path/to/your/script.php',
data: data
}).done(function(response){
console.log('Response', response);
});
});演示
有关详细信息和演示，请参阅jQuery DataTables: How to submit all pages form data。
备注
- 每个复选框都应该有一个分配了唯一值的
value属性。 - 避免对多个元素使用
id属性check，该属性应该是唯一的。 - 您不需要显式地为jQuery DataTables启用
paging、info等选项，这些选项是由have使用htmlspecialchars()函数启用的，以便对HTML实体进行正确编码。例如，<?php echo htmlspecialchars($fet['trk']); ?>.
Stack Overflow用户
发布于 2019-02-17 02:12:20
您不必在提交前在表单上设置隐藏元素，只需在提交前销毁数据表，它将在所有页面上像正常一样提交所有复选框
$('form').on('submit', function (e) {
$('.datatable').DataTable().destroy();
});Stack Overflow用户
发布于 2018-12-16 17:42:48
<form action="Nomination" name="form">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables- example">
<tbody>
<%while (rs1.next()){%>
<tr>
<td><input type="checkbox" name="aabb" value="<%=rs1.getString(1)%>" /></td>
</tr>
<%}%>
</tbody>
</table>
</form>并添加具有正确的表单id和表id的脚本
<script>
var table = $('#dataTables-example').DataTable({
// ... skipped ...
});
</script>
<script>
$('form').on('submit', function(e){
var $form = $(this);
table.$('input[type="checkbox"]').each(function(){
if(!$.contains(document, this)){
if(this.checked){
$form.append(
$('<input>')
.attr('type', 'hidden')
.attr('name', this.name)
.val(this.value)
);} } }); });
</script>这是正常工作的代码
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33240409
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号