复选框仅适用于第一页 - 数据表、导轨

Posted 2023-05-08

【中文标题】复选框仅适用于第一页 - 数据表、导轨

【英文标题】：Checkboxes only work on first page - Datatables, rails

【发布时间】：2016-07-13 01:00:08

【问题描述】：

Senario：所以基本上我使用的是 DataTables，并且在它的第一列上有复选框。我的数据表有多个页面（分页）。

问题：当我在一个页面（可能是任何页面）上选中几个框时，并且还在其他页面上选中了几个框。

只有当我在当前页面时才会保存结果

我对数据表/javascript 很陌生，无法真正弄清楚如何解决这个问题。

$('#formDataTable').DataTable(
         responsive: true,
         autoWidth: true,
         "bFilter": true,
         "bRetrieve": true,
         "bInfo": true,
         "sPageFirst": false,
         "sPageLast": false,
);

我已阅读这些 SO 页面。 Checkboxes will only work on current pagination page in jQuery datatables 该问题的链接目前已失效-> Pagination with selected check boxes. Checkboxes will only work on current pagination page. jQuery datatables

【参考方案1】：

原因

出于性能原因，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 进行演示。

【讨论】：

谢谢！现在一切似乎都正常了 :) 我将查看 gyrocode.com/articles 中有关复选框的信息。

【参考方案2】：

如果您使用的是 Rails，那么使用 Form Helpers 怎么样？

如果您要创建新记录，一个简单的例子是：

<%= form_for(:table_name, :action => 'create') do |f| %>

<table summary="Form data table">
  <tr>
    <th><%= f.label(:responsive) %></th>
    <td><%= f.check_box(:responsive) %></td>
  </tr>
  <tr>
    <th><%= f.label(:auto_width) %></th>
    <td><%= f.check_box(:auto_width) %></td>
  </tr>
</table>

<%= submit_tag("Create Page") %>

<% end %>

即使您有多个页面，如果您将所有表单助手保存在 form_for 方法中，所有内容都应该保存到您的数据库中。

【讨论】：

Datatables 是一个 jquery 插件，根据当前选择的页面创建和销毁行。 html 在这里几乎无关紧要 - Datatables 将对其进行大量修改。

嗯……我明白了……我对这种 Datatables 方法不是很熟悉。你不认为传统的表单助手会成功吗？ :)

【参考方案3】：

在尝试了很多方法后，我终于找到了解决这个问题的甜蜜而简单的方法！！！！ 这里 #contect_form 是表单 ID ...您必须将数据表放在表单中，因为在页面加载时您可以初始化数据表行

     var table;
                $(document).ready(function () 
                    table = $('#table_id').DataTable(
                        scrollY: "412px",
                        scrollX: true,
                        AutoWidth: false,
                        scrollCollapse: false,
                        paging: true,

                    );
                    $('#contact_form').on('submit', function (e) 
                        var form = this;

                        // Encode a set of form elements from all pages as an array of names and values
                        var params = table.$('input,select,textarea').serializeArray();

                        // Iterate over all form elements
                        $.each(params, function () 
                            // If element doesn't exist in DOM
                            if (!$.contains(document, form[this.name])) 
                                // Create a hidden element
                                $(form).append(
                                   $('<input>')
                                      .attr('type', 'hidden')
                                      .attr('name', this.name)
                                      .val(this.value)
                                );
                            
                        );
                    );


                );