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

我正在使用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搜索.

最佳答案
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以获取可能的解决方案示例.

The 07002 can be used to get nodes from the document regardless of paging, ordering etc. This example shows 07002 being used to get all input elements from the table.

$(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);
});

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

转载注明原文:javascript – 使jQuery DataTables默认提交所有行,而不仅仅是搜索时显示的行 - 代码日志