javascript 如何使用 jQuery DataTables 提交所有页面的复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33240409/
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 to submit checkboxes from all pages with jQuery DataTables
提问by athira
I'm trying to get first cell (td) for each row and getting it but only for current page. If I navigate to next page then the checkbox checked on the previous page is not being sent.
我正在尝试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>
回答by Gyrocode.com
CAUSE
原因
jQuery DataTables removes non-visible rows from DOM for performance reasons. When form is submitted, only data for visible checkboxes is sent to the server.
出于性能原因，jQuery DataTables 从 DOM 中删除了不可见的行。提交表单时，仅将可见复选框的数据发送到服务器。
SOLUTION 1. Submit form
解决方案 1. 提交表格
You need to turn elements <input type="checkbox">that are checked and don't exist in DOM into <input type="hidden">upon form submission.
您需要在表单提交时<input type="checkbox">将已检查且不存在于 DOM 中的元素转换为<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)
);
}
}
});
});
SOLUTION 2: Send data via Ajax
解决方案 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);
});
});
DEMO
演示
See jQuery DataTables: How to submit all pages form datafor more details and demonstration.
有关更多详细信息和演示，请参阅jQuery DataTables：如何提交所有页面表单数据。
NOTES
笔记
- Each checkbox should have a
valueattribute assigned with unique value. - Avoid using
idattributecheckfor multiple elements, this attribute is supposed to be unique. - You don't need to explicitly enable
paging,info, etc. options for jQuery DataTables, these are enabled by default. - Consider using
htmlspecialchars()function to properly encode HTML entities. For example,<?php echo htmlspecialchars($fet['trk']); ?>.
- 每个复选框都应该有一个
value分配有唯一值的属性。 - 避免对多个元素使用
id属性check，该属性应该是唯一的。 - 您不需要为 jQuery DataTables显式启用
paging、info等选项，默认情况下这些选项是启用的。 - 考虑使用
htmlspecialchars()函数来正确编码 HTML 实体。例如，<?php echo htmlspecialchars($fet['trk']); ?>。
回答by Maaz Anzar
You do not have to make hidden element on form just before submit simply destroy data table before submit and it will submit all checkbox on all pages like normal
您不必在提交之前在表单上制作隐藏元素，只需在提交前销毁数据表，它将像正常一样提交所有页面上的所有复选框
$('form').on('submit', function (e) {
$('.datatable').DataTable().destroy();
});
回答by user6087223
Great code from Gyrocode.com, but if you have some other hidden values in your rows, you will have to create them too in the form.
来自 Gyrocode.com 的很棒的代码，但是如果您的行中有一些其他隐藏值，您也必须在表单中创建它们。
I use :
我用 ：
var table = $('#example').DataTable({
// ... skipped ...
});
$("#buttonValidation").click(function(){
table.page.len(-1).draw();
});It just displays on screen all the datatable without pagination before sending it in the form. Maybe if you want to hide the display, you can use css opacity :0 (but not display:none).
它只是在屏幕上显示所有数据表，然后在表单中发送之前没有分页。也许如果你想隐藏显示，你可以使用 css opacity :0 （但不是 display:none）。
回答by anjali
<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>
and add script with correct form id and table id
并添加具有正确表单 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>
This is working code
这是工作代码
