jQuery DataTables: How to submit all pages form data

Problem

When you submit the form only current page form elements are submitted.

Cause

jQuery DataTables keeps only current page rows in DOM for performance and compatibility reasons.

Solutions

There are at least two solutions that will allow to submit form elements from all pages.

  1. Submit all pages form data directly
  2. Submit all pages form data via Ajax request

However both solutions will only work in client-side processing mode (option serverSide is not used or is set to false).

Solution 1. Submit all pages form data directly

This technique is somewhat complex and requires manipulations with the form as described below.

  • Retrieve form elements from all pages using $() jQuery DataTables API method
  • Encode a set of form elements as an array of names and values using serializeArray() jQuery method
  • For each element in the list, add <input type="hidden"> element to current page with the same name and value, if form element with given name doesn’t exist in DOM
  • Submit the form
ID Name Age Office Selected Comments
ID Name Age Office Selected Comments
1 Tiger Nixon
2 Garrett Winters
3 Ashton Cox
4 Cedric Kelly
5 Airi Satou
6 Brielle Williamson
7 Herrod Chandler
8 Rhona Davidson
9 Colleen Hurst
10 Sonya Frost
11 Jena Gaines
12 Quinn Flynn

Press Submit to see URL-encoded form data that would be submitted to the server.

Form data:

$(document).ready(function (){
   var table = $('#example1').DataTable({
      pageLength: 4
   });

   // Handle form submission event
   $('#frm-example1').on('submit', function(e){
      var form = this;

      // Encode a set of form elements from all pages as an array of names and values
      var params = table.$('input,select,textarea').serializeArray();

      // Iterate over all form elements
      $.each(params, function(){     
         // If element doesn't exist in DOM
         if(!$.contains(document, form[this.name])){
            // Create a hidden element 
            $(form).append(
               $('<input>')
                  .attr('type', 'hidden')
                  .attr('name', this.name)
                  .val(this.value)
            );
         } 
      });      
   });
});

External resources used in this example:

Edit on jsFiddle

Solution 2. Submit all pages form data via Ajax request

This technique is less complex than direct form submission. It was originally suggested by Allan Jardine, author of jQuery DataTables, in this example.

I will demonstrate this technique below.

ID Name Age Office Selected Comments
ID Name Age Office Selected Comments
1 Tiger Nixon
2 Garrett Winters
3 Ashton Cox
4 Cedric Kelly
5 Airi Satou
6 Brielle Williamson
7 Herrod Chandler
8 Rhona Davidson
9 Colleen Hurst
10 Sonya Frost
11 Jena Gaines
12 Quinn Flynn

Press Submit to see URL-encoded form data that would be submitted to the server.

Form data:

$(document).ready(function (){
   var table = $('#example2').DataTable({
      pageLength: 4
   });

   // Handle form submission event
   $('#frm-example2').on('submit', function(e){
      // Prevent actual form submission
      e.preventDefault();

      // Serialize form data
      var data = table.$('input,select,textarea').serialize();

      // Submit form data via Ajax
      $.post({
         url: 'echo_request.php',
         data: data
      });
   });
});

External resources used in this example:

Edit on jsFiddle

You Might Also Like

Comments

  1. Hey! I just really ant to say thanks because I’ve been looking for this solution since forever and your code worked in the simplest way possible.

    Thanks again!

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
(Optional)