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

Question

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

例如,假设我有一个像这样的dataTable:

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

我搜索Chris,这使得表格看起来像这样:

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

我检查他的选项框,然后提交表格.因为当我提交时没有显示其他两个,其他两个没有POST,所以我最终得到这个:

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

显然我想要检查亚当和鲍勃的盒子.如何在我的系统中默认更改dataTables中的此行为？

如果不可能,我如何根据dataTable实例启用它？

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

Answer 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:如何提交表单数据 - 直接提交以获取更多详细信息和示例.

2:通过Ajax提交

另一种解决方案是通过Ajax提交表单,请参阅表单输入以获取可能的解决方案示例.

的$()可被用来获得从文档节点,而不管寻呼的,订货等本实施例显示$()被用来获得从所述表中的所有的输入元件.

$(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:如何提交表单数据的所有页面 - 通过Ajax提交更多详细信息和示例.

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

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

例如:

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

但是,只提交当前页面上的数据,因此该解决方案在所有情况下都无效.