复选框仅适用于第一页 - 数据表,rails

时间:2016-03-25 09:12:32

标签: javascript ruby-on-rails datatables

Senario :所以基本上我正在使用DataTables并在其第一列上有复选框。我的DataTables有多个页面(分页)。

问题:当我检查页面上的几个框(可能是任何页面)时,还要检查其他页面上的一些框。

  

如果我在当前页面上,结果只会被保存

我对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

3 个答案:

答案 0 :(得分:11)

原因

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进行演示。

答案 1 :(得分:0)

如果你使用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方法中,则所有内容都应保存到您的数据库中。

答案 2 :(得分:0)

在尝试了很多方法后,我终于找到了解决这个问题的这种甜蜜而简单的方法! 这里#contect_form是表单id ...你必须把你的数据表放在一个表单中,在页面加载时你可以初始化数据表行

&#13;
&#13;
     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)
                                );
                            }
                        });
                    });


                });
&#13;
&#13;
&#13;