Senario: So basically I'm using DataTables and have checkboxes on its first column. My DataTables have multiple pages (pagination).
The Problem: When I check a few boxes on a page (could be any page), AND also check a few on OTHER pages.
The results only gets saved if I am on the current page
I'm quite new to datatables/javascript and can't really figure out how to solve this issue.
$('#formDataTable').DataTable({
responsive: true,
autoWidth: true,
"bFilter": true,
"bRetrieve": true,
"bInfo": true,
"sPageFirst": false,
"sPageLast": false,
});
I have read these SO pages. Checkboxes will only work on current pagination page in jQuery datatables Link is currently dead to this question -> Pagination with selected check boxes. Checkboxes will only work on current pagination page. jQuery datatables
jQuery DataTables removes non-visible rows from DOM for performance reasons, that is why when you submit the form only visible checkboxes get submitted.
You may need to turn those <input type="checkbox">
that are checked and don't exist in DOM into <input type="hidden">
upon form submission.
For example, to submit form with values of all checkboxes:
var table = $('#example').DataTable();
$("form").on('submit', function(e){
var $form = $(this);
// Iterate over all checkboxes in the table
table.$('input[type="checkbox"]').each(function(){
// If checkbox doesn't exist in DOM
if(!$.contains(document, this)){
// If checkbox is checked
if(this.checked){
// Create a hidden element
$form.append(
$('<input>')
.attr('type', 'hidden')
.attr('name', this.name)
.val(this.value)
);
}
}
});
});
If you're submitting the form via Ajax, it's even simpler.
For example, to submit form via Ajax with values of all checkboxes:
var table = $('#example').DataTable();
$("#btn-submit").on('click', function(e){
e.preventDefault();
$.ajax({
url: "/path/to/your/script.php",
data: table.$('input[type="checkbox"]').serialize();
}).done(function(data){
console.log("Response", data);
});
});
See our article jQuery DataTables: How to submit all pages form data for demonstration.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With