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').serializeArray();

      // Include extra data if necessary
      // data.push({'name': 'extra_param', 'value': 'extra_value'});

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

External resources used in this example:

Edit on jsFiddle

You May 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!

  2. There’s a problem with the code above. It continues to send previously selected items even when they have been deselected.

    1. Same situation here.
      Thanks to Michael for this, but in my case his solution doesn’t work. Also all over the net I find that he wrote the same example – but again – in my case this doesn’t work.

      1. I see that the confusion comes from the “Selected” column name. The code above submits data from all rows irrespective of checkboxes selected in the “Selected” column. This column is there just to demonstrate the submission of various input types, including checkboxes.

        If you need to handle row selection with checkboxes with jQuery DataTables, consider using jQuery DataTables Checkboxes plug-in.

  3. i just changed the selector from

     
     var chkbox =$('#sample_1td').find('input[type="checkbox"]:checked'); 
     

    To

    
      var table = $('#sample_1');
     var oTable = table.dataTable();
      var chkbox = oTable.$('input[type="checkbox"]:checked')
    

    And it worked fine !!! i can’t understand what is the difference between $(‘table’) and the $ (‘table’).datatable();

    why the second allow me to access all elements but the first selector is not ?

    1. Examples use HTML sourced data, but the code is the same if you have Ajax or JavaScript sourced data. See Data sources examples for more information. Please note that the code above is not needed if you use server-side processing mode. In this mode only one page data is available at once.

  4. Hello I would like to thank you about your solution , I need some help if I want to submit only changed input text data.

    Many thanks

  5. Thanks for this man, i really do appreciate this, was really helpful.

    Have tried all could and find for some time now till i found this.

    Thanks alot

  6. Dear Sir Ryvkin,
    what you have worked with are form elements, what should I do to submit the name of the person which happens not to be a form element, alongside the corresponding information?

  7. Hello, Please can you help me, it seems that this solution only works for the client side,

    and i need it really badly in server side, i’ve tried everything, i’m new to jquery and ajax, please i need an exemple on the serverside

    the thing is my dataTable has 3 normal colums for the display, the 4th column has dropdown, so my controller should get the model with the whole row plus the new selected value of the dropdown.

    Thank you in advance

  8. hi how can i get other coloumn data
    just like
    var rows_selected = table.column(1).checkboxes.selected();
    column 0 id
    column 1 Name
    i want to get column name when my checkbox selected.

  9. how do you get all the columns to be input types in datatables. i set type=”text” but this does not pull with form inputs.

    1. in code above it is selecting input, select and textarea types. since my datatable is created dynamically how do i set the columns to one of these types?
      i just have data..

      table.$(‘input,select,textarea’).serializeArray();

      thank you, your site has been very helpful.

    2. Look at the HTML markup of the example, form elements are specified in each table cell <td></td>. If you receive your data via Ajax, you can either produce HTML markup by the server-side script or generate it on the client-side by using callback function defined by columns.render option.

  10. Hello Michael 

    is it possible to let it working as well to pass all hidden rows.child in a responsive table?

    Hidden data (with the plus) are not sent to update my db.

  11. If we are implementing this in server Side so we are click on pagination then previous page text box value showing blank how can we fix @Michael ?

Leave a Reply

(optional)

This site uses Akismet to reduce spam. Learn how your comment data is processed.