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.
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
$(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:
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.
$(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:
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!
Thank you, really glad I was able to help.
There’s a problem with the code above. It continues to send previously selected items even when they have been deselected.
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.
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.
You are life saver!!!! Thanks a lot!!
Glad that it worked for you!
i just changed the selector from
To
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 ?
Dear Sir,
Above Example for static data
How can we do it , For dynamic data, Please send one example
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.
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
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
thank you it worked
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?
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
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.
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.
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.
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.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.
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 ?