复选框仅在首页上起作用-数据表，导轨 [英] Checkboxes only work on first page - Datatables, rails

问题描述

Senario ：因此，基本上，我正在使用DataTables，并在其第一列中具有复选框。我的数据表有多个页面（分页）。

Senario: So basically I'm using DataTables and have checkboxes on its first column. My DataTables have multiple pages (pagination).

问题：当我选中页面上的几个框（可以是任何页面）时，并且还要在其他页面上查看一些内容。

The Problem: When I check a few boxes on a page (could be any page), AND also check a few on OTHER pages.

仅当我在当前页面上时，结果才会保存

The results only gets saved if I am on the current page

我对datatables / javascript很陌生，无法真正解决该问题。

I'm quite new to datatables/javascript and can't really figure out how to solve this issue.

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

我已经阅读了这些SO页面。 复选框将仅适用于jQuery数据表中的当前分页页面
链接目前已死于该问题-> 使用选定复选框进行分页。复选框仅在当前分页上有效。 jQuery数据表

I have read these SO pages. Checkboxes will only work on current pagination page in jQuery datatables Link is currently dead to this question -> Pagination with selected check boxes. Checkboxes will only work on current pagination page. jQuery datatables

推荐答案

原因

jQuery数据表已删除出于性能方面的原因，DOM中出现不可见的行，这就是为什么当您提交表单时只提交可见的复选框。

CAUSE

jQuery DataTables removes non-visible rows from DOM for performance reasons, that is why when you submit the form only visible checkboxes get submitted.

您可能需要将被选中但在DOM中不存在的< input type = checkbox> 转换为<输入类型= hidden> 。

You may need to turn those <input type="checkbox"> that are checked and don't exist in DOM into <input type="hidden"> upon form submission.

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

For example, to submit form with values of all checkboxes:

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提交表单，则更加简单。

If you're submitting the form via Ajax, it's even simpler.

例如，通过Ajax提交带有所有复选框值的表单：

For example, to submit form via Ajax with values of all checkboxes:

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：如何提交所有页面表单数据进行演示。

这篇关于复选框仅在首页上起作用-数据表，导轨的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！