选中复选框的分页。 复选框仅适用于当前分页页面。 jQuery数据表
我正在使用jquery datatables插件 。
我只有一个直接的HTML表格布局。
Id Email Name Phone City State Arrival Departure Inserted Check 301 email address Test July 14 2011 July 23 2011 April 12 2011 07:05 300 email Test September 02 2011 September 10 2011 April 11 2011 12:01
这是我的提交代码（只是临时）。
我的javascript将复选框映射到数组。
function test() { var values = $('input:checkbox:checked.chkbox').map(function () { return this.value; }).get(); console.log(values); }
这是数据表代码
$(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 ] });
问题是，我无法跨页面选择复选框。 该表有多个页面。 如果我单击“提交”，它只会提交我当前页面的复选框数组。
我希望这很清楚。 我不确定发生了什么。 谢谢你的帮助。
我想你可能会看看这个 ，它可能会解决你的问题。
这个例子可能对你有帮助，因为它似乎正是你的情况（这个使用fnGetNodes（），而在另一个链接中解释了如果第一个函数不起作用如何使用fnGetHiddenNodes（））： http： //datatables.net/examples/api/form.html
var oSettings = oTable.fnSettings(); oSettings._iDisplayLength = CHECK_BOXES_COUNT_OR_ROW_COUNT; oTable.fnDraw();
这应该为您解决问题
原因
出于性能原因，jQuery DataTables从DOM中删除不可见的行，这就是为什么当您提交表单时，只有可见的复选框被提交。
解
在表单提交时，您可能需要将那些已检查且在DOM中不存在的
例如，要提交包含所有复选框值的表单：
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( $('') .attr('type', 'hidden') .attr('name', this.name) .val(this.value) ); } } }); });
如果您通过Ajax提交表单，那就更简单了。
例如，要通过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
请参阅jQuery DataTables：如何提交表单数据以获取更多信息和演示。