使用选定复选框分页。复选框仅在当前分页页面上起作用。jQuery数据表

我在用电话

我有一个简单的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> 

这是datatables代码

 $(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（））：

这将为您解决问题

原因 出于性能原因，jQuery DataTables会从DOM中删除不可见的行，这就是为什么在提交表单时只会提交可见复选框的原因

解决方案 在提交表单时，您可能需要将那些已选中且在DOM中不存在的

转换为

例如，要提交包含所有复选框值的表单：

var table=$（'#示例'）.DataTable（）；
$（“表格”）。在（'submit'，函数（e）{
var$form=$（此）；
//迭代表中的所有复选框
表.$（'input[type=“checkbox”]”）。每个（函数（）{
//如果DOM中不存在复选框
如果（！$包含（文档，本））{
//如果选中复选框
如果（选中此项）{
//创建一个隐藏元素
$form.append(
$('')
.attr（'类型'，'隐藏'）
.attr（'name'，this.name）
.val（此.value）
);
}
} 
});          
});

如果您通过Ajax提交表单，则更简单

例如，要使用所有复选框的值通过Ajax提交表单：

var table=$（'#示例'）.DataTable（）；
$（“#btn提交”）。在（'click'，函数（e）{
e、 预防默认值（）；
$.ajax({
url:“/path/to/your/script.php”，
数据：table.$（'input[type=“checkbox”]”）。serialize（）；
}).完成（功能（数据）{
控制台日志（“响应”，数据）；
});
});

演示

---

有关更多信息和演示，请参阅。

非常感谢。我完全错过了这个例子。嗨，我如何迭代

var sData=$（'input'，oTable.fnGetNodes（））.serialize（）返回一个字符串，如tuxi=tuxi1&tuxia=tuxi2link first，给出404未找到页面。仍然未找到页面任何人都可以有新链接这似乎阻止了我表中数据的加载。
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
        ]
    });     

var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = CHECK_BOXES_COUNT_OR_ROW_COUNT;
oTable.fnDraw();