使jQuery DataTables默认提交所有行，而不仅仅是搜索时显示的行 [英] Make jQuery DataTables submit all rows by default, not just ones displayed upon a search

问题描述

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

I'm using jQuery DataTables to display records in my system, often with a <form> wrapping it and some in-line options (like a checkbox as one of the table's columns). When I use the built-in search box, it narrows down the displayed list. If I edit one of those records, then submit the form only the displayed records POST, instead of ALL records. I'd like to change that behavior.

例如，假设我有一个像这样的dataTable：

For example, imagine I have a dataTable like this:

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

我搜索 Chris ，这使得表格如下所示：

I search for Chris which makes the table look like this:

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

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

I check his Option box, then submit the form. Because the other two were not displayed when I submit, those other two do not POST, so I end up with this:

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

显然我想要检查 Adam 和 Bob 的复选框。如何在我的系统中默认更改dataTables中的此行为？

Obviously I want to keep Adam and Bob's boxes checked. How can I change this behavior in dataTables by default in my system?

如果不可能，我如何启用每个dataTable实例？

If it's not possible, how do I enable it per dataTable instance?

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

I cannot find (or perhaps simply do not understand) the answer in the dataTables documentation](https://editor.datatables.net/examples/inline-editing/submitData.html) or on my existing Google and StackOverflow searches.

推荐答案

1：通过POST提交

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

1: Submit via POST

Example below is for checkboxes only and needs to be adapted if you have other elements such as radio buttons, text boxes, etc. It creates hidden elements on the page with missing elements data.

// 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：如何提交所有页面数据 - 直接提交以获取更多详细信息和示例。

See jQuery DataTables: How to submit all pages form data - Submit directly for more details and examples.

另一个解决方案是通过Ajax提交表单，参见表单输入，以获取可能的解决方案示例。

Another solution is to submit the form via Ajax, see Form inputs for an example of possible solution.

$（）可用于从文档中获取节点，而不管分页，排序等。此示例显示 $（）用于从表中获取所有输入元素。

The $() can be used to get nodes from the document regardless of paging, ordering etc. This example shows $() 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：如何提交表单数据的所有页面 - 通过Ajax提交以获取更多详细信息和示例。

See jQuery DataTables: How to submit all pages form data - Submit via Ajax for more details and examples.

您可以使用 search（） 提交表单前的API方法。

You could reset the filtering with search() API method before submitting the form.

例如：

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

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

However only data on current page would be submitted so this solution is not effective in all cases.

这篇关于使jQuery DataTables默认提交所有行，而不仅仅是搜索时显示的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！