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

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

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

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

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

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

我已经阅读了这些页面。复选框仅适用于 jQuery 数据表中的当前分页页面 https://stackoverflow.com/questions/30723911/checkboxes-will-only-work-on-current-pagination-page-in-jquery-datatables?answertab=oldest#tab-top该问题的链接目前已失效 ->使用选定的复选框进行分页。复选框仅适用于当前分页页面。 jQuery 数据表 https://stackoverflow.com/questions/6020574/pagination-with-selected-check-boxes-checkboxes-will-only-work-on-current-pagin

CAUSE

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

SOLUTION

您可能需要将这些<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：如何提交所有页面表单数据 https://www.gyrocode.com/articles/jquery-datatables-how-to-submit-all-pages-form-data/用于演示。