Submitting all form data after filtering

Question

I have an html table that is inside of a form. I applied DataTables to the table to add filtering and sorting. This works great.

The only issue is that if a user enters data into the search box to filter and then submits the form, only the visible rows are submitted. I assumed that DataTables was just hiding the rows filtered by the search and thus everything should still be there in the form but that doesn't seem to be the case.

Is there any way to post all rows with the form post even if the user happens to have a search filter on?

Answer 1

SOLUTION

Use the following technique to submit data from all pages in the table, not just filtered data on the first page.

var table = $('#example').DataTable();

// Handle form submission event 
$('#frm-example').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)
         );
      } 
   });      
});

DEMO

See this example for code and demonstration.

LINKS

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