chinm3 chinm3 - 1 month ago 24
Javascript Question

Checkboxes only work on first page - Datatables, rails

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.

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
      // If checkbox doesn't exist in DOM
      if(!$.contains(document, this)){
         // If checkbox is checked
            // Create a hidden element 
                  .attr('type', 'hidden')

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){

      url: "/path/to/your/script.php",
      data: table.$('input[type="checkbox"]').serialize();
      console.log("Response", data);


See our article jQuery DataTables – How to add a checkbox column for demonstration.