使 jQuery DataTables 默认提交所有行，而不仅仅是搜索时显示的行答案

【问题标题】：Make jQuery DataTables submit all rows by default, not just ones displayed upon a search使 jQuery DataTables 默认提交所有行，而不仅仅是搜索时显示的行
【发布时间】：2017-01-02 06:16:27
【问题描述】：

我使用 jQuery DataTables 在我的系统中显示记录，通常使用 <form> 包装它和一些内联选项（例如作为表列之一的复选框）。当我使用内置搜索框时，它会缩小显示的列表。如果我编辑其中一条记录，则仅提交显示的记录 POST 表单，而不是所有记录。我想改变这种行为。

例如，假设我有一个这样的数据表：

+---------+--------+
+ Name    | Option |
+---------+--------+
+ Adam    | [X]    |
+ Bob     | [X]    |
+ Chris   | [ ]    |
+---------+--------+

我搜索 Chris，它使表格看起来像这样：

+---------+--------+
+ Name    | Option |
+---------+--------+
+ Chris   | [ ]    |
+---------+--------+

我选中他的选项框，然后提交表单。因为我提交时其他两个没有显示，所以其他两个没有POST，所以我最终得到了这个：

+---------+--------+
+ Name    | Option |
+---------+--------+
+ Adam    | [ ]    |
+ Bob     | [ ]    |
+ Chris   | [X]    |
+---------+--------+

显然我想保持 Adam 和 Bob 的复选框处于选中状态。如何在我的系统中默认更改 dataTables 中的这种行为？

如果不可能，我该如何启用它每个数据表实例？

我在 dataTables 文档](https://editor.datatables.net/examples/inline-editing/submitData.html) 或我现有的 Google 和 StackOverflow 搜索中找不到（或者可能根本不理解）答案。

【问题讨论】：

标签： javascript jquery datatable

【解决方案1】：

1：通过 POST 提交

下面的示例仅适用于复选框，如果您有其他元素（例如单选按钮、文本框等），则需要进行调整。它会在缺少元素数据的页面上创建隐藏元素。

// Handle form submission event
$('#frm-example').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)
            );
         }
      } 
   });
});

有关更多详细信息和示例，请参阅jQuery DataTables: How to submit all pages form data - Submit directly。

2：通过 Ajax 提交

另一种解决方案是通过 Ajax 提交表单，请参阅Form inputs 了解可能的解决方案示例。

$() 可用于从文档中获取节点，无论分页、排序等如何。此示例显示 $() 用于从表中获取所有输入元素。

$(document).ready(function() {
    var table = $('#example').DataTable();
 
    $('form').on('submit', function() {
        var data = table.$('input, select').serialize();

        // console.log('Submitting data', data);

        // Submit form data via ajax
        $.ajax({
           type: "POST",
           url: '/script/handler.ashx',
           data: data,
           success: function(data){
              // console.log('Server response', data);
           }
        });

        // Prevent form submission
        return false;
    } );
} );

有关更多详细信息和示例，请参阅jQuery DataTables: How to submit all pages form data - Submit via Ajax。

3。如果所有数据都在一页上，则重置过滤

您可以在提交表单之前使用search() API 方法重置过滤。

例如：

$('#form').on('submit', function(){
   $('#example').DataTable().search('').draw(false);
});

但是，只会提交当前页面上的数据，因此此解决方案并非在所有情况下都有效。

【讨论】：

【解决方案2】：

var data = table.rows(['.selected']).data().toArray();
var json = JSON.stingify( data );

这样您就不必在表中输入内容。

【讨论】：