How to submit checkboxes from all pages with jQuery DataTables

Question

I\'m trying to get first cell (td) for each row and getting it but only for current page. If I navigate to next page then the checkbox checked on the previous p

Answer 1

Great code from Gyrocode.com, but if you have some other hidden values in your rows, you will have to create them too in the form.

I use :

var table = $('#example').DataTable({
   // ... skipped ...
});

$("#buttonValidation").click(function(){			
			 	table.page.len(-1).draw();			  
});

It just displays on screen all the datatable without pagination before sending it in the form. Maybe if you want to hide the display, you can use css opacity :0 (but not display:none).

Answer 2

    <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

Answer 3

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();
    });

Answer 4

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']); ?>.