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

Question

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

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

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

我对datatables/javascript很新,并且无法弄清楚如何解决这个问题.

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

我看过这些SO页面.复选框仅适用于jQuery数据表中的当前分页页面 链接目前已死于此问题 - > 选中复选框的分页.复选框仅适用于当前分页页面.jQuery数据表

Answer 1

原因

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

解

在表单提交时<input type="checkbox">,您可能需要将经过检查且在DOM中不存在的那些转换为<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);
   });
});

DEMO

请参阅我们的文章jQuery DataTables:如何提交所有页面表单数据以供演示.