How to send checkboxes from all pages using jQuery DataTables

Question

I am trying to get the first cell ( td ) for each row and get it, but only for the current page. If I go to the next page, the checkbox set on the previous page will not be sent.

 <table class="table" id="example2"> <thead><tr> <th>Roll no</th><th>Name</th></tr><thead> <?php $sel = "SELECT * FROM `st`"; $r = mysqli_query($dbc, $sel); while($fet = mysqli_fetch_array($r)){ ?> <tr> <td><?php echo $fet['trk']?></td> <td><input type="text" value="<?php echo $fet['ma']?>" id="man" class="form-control"></td> <td><input type="checkbox" id="check" name="myCheckbox" class="theClass"></td></tr> <?php } ?> </table> <input type="submit" id="sub_marks" class="btn btn-info" value="Submit & Continue"> <script src="plugins/datatables/jquery.dataTables.min.js" type="text/javascript"></script> <script src="plugins/datatables/dataTables.bootstrap.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#example2').DataTable({ "paging": true, "lengthChange": false, "searching": false, "ordering": true, "info": true, "autoWidth": false, }) }); </script> <script> $('#sub_marks').click(function() { var values = $("table #check:checked").map(function() { return $(this).closest("tr").find("td:first").text(); }).get(); alert(values); }) </script> 

Answer 1

CAUSE

jQuery DataTables removes invisible rows from the DOM for performance reasons. When a form is submitted, only data for visible flags is sent to the server.

SOLUTION 1. Submit the form

You need to rotate the <input type="checkbox"> elements that are checked and do not exist in the DOM in <input type="hidden"> after submitting the form.

 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: sending data through Ajax

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

Demo

See jQuery DataTables: how to send data from all pages for more details and a demo.

Notes

• Each flag must have a value attribute assigned by a unique value.
• Avoid using the id check attribute for multiple elements, this attribute must be unique.
• You do not need to explicitly enable paging , info , etc. for jQuery DataTables, they are enabled by default.
• Consider using htmlspecialchars() to properly encode HTML objects. For example, <?php echo htmlspecialchars($fet['trk']); ?> <?php echo htmlspecialchars($fet['trk']); ?> .