CODEWITHSUNDEEP
jqueryfilterdatatablesformshttp-post
leora
leora

Reputation: 196741

Submitting all form data after filtering

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?

Upvotes: 6

Views: 2362

Answers (2)

Aldry Wijaya
Aldry Wijaya

Reputation: 425

Sorry if it's too late, but better than nothing.

Solution:

Create a hidden element after table (or somewhere else) and use these script to do the trick.

HTML:

<table id="table">
....
</table>
<div id="table-tmp" style="display:none;">

Javascript:

var table = $('#table').DataTable().on('draw', function() {
    $('#table-tmp').html(table.$('input').clone());
    $('#table-tmp').append(table.$('select').clone());
    $('#table-tmp').append(table.$('textarea').clone());
});

So when you filtering (or doing search) your table, DataTable will destroy row from DOM. By using trigger "draw", you manipulate its content.

Upvotes: 0

Gyrocode.com
Gyrocode.com

Reputation: 58900

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.

Upvotes: 6

Related Questions