带有选中复选框的分页。复选框仅适用于当前分页页面。jQuery 数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6020574/
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
Pagination with selected check boxes. Checkboxes will only work on current pagination page. jQuery datatables
提问by Drew H
I'm using the jquery datatables plugin.
我正在使用jquery 数据表插件。
I have just a straight html table layout for it.
我只有一个直接的 html 表格布局。
<table class="display" id="contactsTable">
<thead>
<tr>
<th>Id</th>
<th>Email</th>
<th>Name</th>
<th>Phone</th>
<th>City</th>
<th>State</th>
<th>Arrival</th>
<th>Departure</th>
<th>Inserted</th>
<th>Check</th>
</tr>
</thead>
<tbody>
<tr>
<td>301</td>
<td>email address</td>
<td>Test</td>
<td></td>
<td></td>
<td></td>
<td>July 14 2011</td>
<td>July 23 2011</td>
<td>April 12 2011 07:05</td>
<td><input type="checkbox" name="selected[]" value="301" class="chkbox"/></td>
</tr>
<tr>
<td>300</td>
<td>email</td>
<td>Test</td>
<td></td>
<td></td>
<td></td>
<td>September 02 2011</td>
<td>September 10 2011</td>
<td>April 11 2011 12:01</td>
<td><input type="checkbox" name="selected[]" value="300" class="chkbox"/></td>
</tr>
Here is my code for submit (just temp).
这是我的提交代码（只是临时的）。
<input id="submitButton" type="submit" value="Submit" onclick="test()" />
And my javascript to map the checkboxes to an array.
我的 javascript 将复选框映射到数组。
function test() {
var values = $('input:checkbox:checked.chkbox').map(function () {
return this.value;
}).get();
console.log(values);
}
Here is the datatables code
这是数据表代码
$(document).ready(function() {
var selected;
var selectedOutput = '#selectedOutput';
var template = 'selectedTemplate';
var submitButton = '#submitButton'
var dTable = $('#contactsTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": false,
"bInfo": true,
"bAutoWidth": false,
"bProcessing": true,
"aoColumns": [
{"bVisible": false }, //keep the id invisble
null,
null,
null,
null,
null,
null,
null,
null,
null
]
});
The problem is, I can't do a checkbox selection across a page. The table has mutiple pages to it. If I click submit, it only submits the array of checkboxes for the current page I am on.
问题是，我无法在页面上进行复选框选择。该表有多个页面。如果我单击提交，它只会提交我所在的当前页面的复选框数组。
I hope this is clear enough. I'm not sure what is happening. Thanks for any help.
我希望这已经足够清楚了。我不确定发生了什么。谢谢你的帮助。
采纳答案by Nicola Peluchetti
i think you might have a look at this, it might solve your problem.
我想你可以看看这个，它可能会解决你的问题。
This example might be of help to you as it seems to be exactly your case (this one uses fnGetNodes(), while in the other link it is explained how to use fnGetHiddenNodes() if the first function doesn't work ): http://datatables.net/examples/api/form.html
这个例子可能对你有帮助，因为它似乎正是你的情况（这个例子使用 fnGetNodes()，而在另一个链接中解释了如何使用 fnGetHiddenNodes() 如果第一个函数不起作用）：http: //datatables.net/examples/api/form.html
回答by Shrenik
var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = CHECK_BOXES_COUNT_OR_ROW_COUNT;
oTable.fnDraw();
This should solve the issue for you
这应该可以为您解决问题
回答by Gyrocode.com
CAUSE
原因
jQuery DataTables removes non-visible rows from DOM for performance reasons, that is why when you submit the form only visible checkboxes get submitted.
jQuery DataTables 出于性能原因从 DOM 中删除不可见的行，这就是为什么当您提交表单时，只提交可见的复选框。
SOLUTION
解决方案
You may need to turn those <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">。
For example, to submit form with values of all checkboxes:
例如，要提交带有所有复选框值的表单：
var table = $('#example').DataTable();
$("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)
);
}
}
});
});
If you're submitting the form via Ajax, it's even simpler.
如果您通过 Ajax 提交表单，那就更简单了。
For example, to submit form via Ajax with values of all checkboxes:
例如，通过 Ajax 提交带有所有复选框值的表单：
var table = $('#example').DataTable();
$("#btn-submit").on('click', function(e){
e.preventDefault();
$.ajax({
url: "/path/to/your/script.php",
data: table.$('input[type="checkbox"]').serialize();
}).done(function(data){
console.log("Response", data);
});
});
DEMO
演示
See jQuery DataTables: How to submit all pages form datafor more information and demonstration.
有关更多信息和演示，请参阅jQuery DataTables：如何提交所有页面表单数据。
