Make jQuery DataTables submit all rows by default, not just ones displayed upon a search

Question

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.

For example, imagine I have a dataTable like this:

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

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

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

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]    |
+---------+--------+

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

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

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.

Answer 1

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

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

2: Submit via 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;
    } );
} );

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

3. Reset filtering if all data is on one page

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

For example:

$('#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.