复选框只适用于第一页-数据表、轨道

Checkboxes only work on first page - Datatables, rails

本文关键字：数据表 轨道 第一页 适用于 复选框      更新时间：2023-09-26

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

问题：当我在一个页面上选中几个框（可以是任何页面）时，也会在其他页面上选中一些框。

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

我对datatables/javascript还很陌生，真的不知道如何解决这个问题。

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

我读过这些SO页面。复选框仅适用于jQuery数据表中的当前分页页面此问题的链接当前已失效->使用选中的复选框进行分页。复选框仅适用于当前分页页面。jQuery数据表

原因

出于性能原因，jQueryDataTables从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);
   });
});

演示

请参阅我们的文章jQueryDataTables:How to submit all pages form data for demonstruction。

如果您使用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方法中，那么所有内容都应该保存到数据库中。

在尝试了很多方法之后，我终于找到了解决这个问题的简单方法！！！！这里#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)
                                );
                            }
                        });
                    });
                });

tableaClients.rows（）.eevery（函数（rowIdx，tableLoop，rowLoop）｛

            var data = this.data();
            let $tr = $(this.node());
            let $checkbox = $tr.find('td:first-child input[type="checkbox"]')
            if ($checkbox.is(':checked')) {
                var Cli = {
                            Rpu : $tr.find('.Rpu').html(),
                            Rmu : $tr.find('.Rmu').html()
                           }
            Clientes.push(Cli);
            }
        });
相关文章：