How to submit checkboxes from all pages with jQuery DataTables

CAUSE

jQuery DataTables removes non-visible rows from DOM for performance reasons. When form is submitted, only data for visible checkboxes is sent to the server.

SOLUTION 1. Submit form

You need to turn elements <input type="checkbox"> that are checked and don't exist in DOM into <input type="hidden"> upon form submission.

var table = $('#example').DataTable({   // ... skipped ...});$('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)            );         }      }    });          });

SOLUTION 2: Send data via Ajax

var table = $('#example').DataTable({   // ... skipped ...});$('#btn-submit').on('click', function(e){   e.preventDefault();   var data = table.$('input[type="checkbox"]').serializeArray();   // Include extra data if necessary   // data.push({'name': 'extra_param', 'value': 'extra_value'});   $.ajax({      url: '/path/to/your/script.php',      data: data   }).done(function(response){      console.log('Response', response);   });});

DEMO

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

NOTES

• Each checkbox should have a value attribute assigned with unique value.
• Avoid using id attribute check for multiple elements, this attribute is supposed to be unique.
• You don't need to explicitly enable paging, info, etc. options for jQuery DataTables, these are enabled by default.
• Consider using htmlspecialchars() function to properly encode HTML entities. For example, <?php echo htmlspecialchars($fet['trk']); ?>.

You do not have to make hidden element on form just before submit simply destroy data table before submit and it will submit all checkbox on all pages like normal

    $('form').on('submit', function (e) {        $('.datatable').DataTable().destroy();    });

    <form action="Nomination" name="form">        <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables- example">     <tbody>     <%while (rs1.next()){%>        <tr>       <td><input type="checkbox"  name="aabb" value="<%=rs1.getString(1)%>" /></td>      </tr>      <%}%>     </tbody>     </table>     </form>

and add script with correct form id and table id

      <script>      var table = $('#dataTables-example').DataTable({      // ... skipped ...      });      </script>      <script>      $('form').on('submit', function(e){      var $form = $(this);      table.$('input[type="checkbox"]').each(function(){      if(!$.contains(document, this)){      if(this.checked){      $form.append(      $('<input>')      .attr('type', 'hidden')      .attr('name', this.name)      .val(this.value)        );} } }); });       </script>

This is working code