使用所选复选框进行分页。复选框只适用于当前分页页。 jQuery数据表 [英] Pagination with selected check boxes. Checkboxes will only work on current pagination page. jQuery datatables

问题描述

我正在使用 jquery datatables插件。

我刚刚一个直的html表格布局。

 < table class =displayid =contactsTable> 
< thead> 
< tr> 
< th> Id< / th> 
< th>电子邮件< / th> 
< th> Name< / th> 
< th> Phone< / th> 
< th> City< / th> 
< th>状态< / th> 
< th>到达< / th> 
> Departure< / th> 
< th>插入< / th> 
< th>检查< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td> 301< / td> 
< td>电子邮件地址< / td> 
< td>测试< / td> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< td> 2011年7月14日< / td> 
< td> 2011年7月23日< / td> 
< td> 2011年4月12日07：05< / td> 
< td>< input type =checkboxname =selected []value =301class =chkbox/>< / td> 
< / tr> 
< tr> 
< td> 300< / td> 
< td>电子邮件< / td> 
< td>测试< / td> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< td> 2011年9月2日< / td> 
< td> 2011年9月10日< / td> 
< td> 2011年4月11日12：01< / td> 
< td>< input type =checkboxname =selected []value =300class =chkbox/>< / td> 
< / tr> 
  

这是我提交的代码（just temp）。

 < input id =submitButtontype =submitvalue =Submitonclick =test（）/> 
  

我的javascript将复选框映射到数组。

$ b $（$（$ {





this.value;
}）。get（）;
console.log（values）;
}

这是数据表代码

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $
$ b var template ='selectedTemplate';
var submitButton ='#submitButton'

var dTable = $（'＃contactsTable'）。dataTable（{
bJQueryUI ，
sPaginationType：full_numbers，
bPaginate：true，
bLengthChange：true，
bFilter：true，
bSort ：false，
bInfo：true，
bAutoWidth：false，
bProcessing：true，
aoColumns：[
{bVisible ：false}，//保持id invisble
null，
null，
null，
null，
null，
null，
null，
null，
null
]
}）;

问题是，我无法在页。该表有多个页面。如果我点击提交，它只会提交我当前页面的复选框数组。

我希望这一点很清楚。我不知道发生了什么。感谢任何帮助。

解决方案

我想你可能会看看这个，可能会解决你的问题。

这个例子可能是对你的帮助，因为它似乎正是你的情况（这个使用fnGetNodes（），而在另一个链接中，它解释了如何使用fnGetHiddenNodes（）如果第一个函数不起作用）： http://datatables.net/examples/api/form.html

I'm using the jquery datatables plugin.

I have just a straight html table layout for it.

<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.

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.

解决方案

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

这篇关于使用所选复选框进行分页。复选框只适用于当前分页页。 jQuery数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！