带有选中复选框的分页。复选框仅适用于当前分页页面。 jQuery 数据表

Posted 2023-05-09

【中文标题】带有选中复选框的分页。复选框仅适用于当前分页页面。 jQuery 数据表

【英文标题】：Pagination with selected check boxes. Checkboxes will only work on current pagination page. jQuery datatables

【发布时间】：2011-08-26 14:35:35

【问题描述】：

我正在使用jquery datatables plugin。

我只有一个直接的 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> 

这是我的提交代码（只是临时代码）。

<input id="submitButton" type="submit" value="Submit" onclick="test()" />

我的 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
        ]
    );     

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

我希望这已经足够清楚了。我不确定发生了什么。感谢您的帮助。

【参考方案1】：

我想你可以看看this，它可能会解决你的问题。

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

【讨论】：

非常感谢。我完全错过了那个例子。

嗨，我如何迭代 var sData = $('input', oTable.fnGetNodes()).serialize(); 它返回一个字符串，如 tuxi=tuxi1&tuxia=tuxi2

链接首先给出 404 Page not found.

仍然找不到页面，任何人都可以有新的链接

【参考方案2】：

原因

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

解决方案

您可能需要在提交表单时将那些已检查且不存在于 DOM 中的 <input type="checkbox"> 转换为 <input type="hidden">。

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

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)
            );
         
       
   );          
);

如果您通过 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);
   );
);

演示

有关更多信息和演示，请参阅jQuery DataTables: How to submit all pages form data。

【参考方案3】：

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

这应该可以为您解决问题

【讨论】：

这似乎阻止了我表中的数据加载。