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 page is not being 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>

show the code how you are getting value in first page. Its the problem in event delegation. — Niranjan N Raju
– Niranjan N Raju, Commented Oct 20, 2015 at 15:20

Gyrocode.com · Accepted Answer · 2018-08-01 13:00:29Z

22

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

edited Aug 1, 2018 at 13:00

answered Oct 20, 2015 at 15:41

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

athira Over a year ago

oh. am new to jquery. plz help me to edit my code above.

Gyrocode.com Over a year ago

@athira, Do you have a form tag in your HTML with action attribute or do you submit your form via Ajax?

Gyrocode.com Over a year ago

@athira, added sample code for form submission via Ajax

Prashant Pokhriyal Over a year ago

@Gyrocode.com, I want to use second options but I've additional data to send along with checkboxes. How can I do it?

Gyrocode.com Over a year ago

@PrashantPokhriyal, you can do it as follows:

var data = table.$('input[type="checkbox"]').serializeArray(); data.push({'name': 'extra_param', 'value': 'extra_value'});

and then use data for ajax() function.

Maaz Anzar · Accepted Answer · 2019-02-16 18:12:20Z

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

answered Feb 16, 2019 at 18:12

Maaz Anzar

1411 gold badge2 silver badges8 bronze badges

1 Comment

mark_b Over a year ago

Using destroy() is generally a bad idea unless that really is what you intend to do because it has side effects that are probably unintended and can cause confusing behaviour. There is nearly always a better solution than the blunt hammer approach.

anjali · Accepted Answer · 2018-12-16 09:42:48Z

0

    <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

answered Dec 16, 2018 at 9:42

anjali

1

1 Comment

Moshe Slavin Over a year ago

can you add some explanation of the code you've provided?

user6087223 · Accepted Answer · 2019-03-05 12:13:15Z

0

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

answered Mar 5, 2019 at 12:13

user6087223

594 bronze badges

Collectives™ on Stack Overflow

How to submit checkboxes from all pages with jQuery DataTables

4 Answers 4

CAUSE

SOLUTION 1. Submit form

SOLUTION 2: Send data via Ajax

DEMO

NOTES

5 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

CAUSE

SOLUTION 1. Submit form

SOLUTION 2: Send data via Ajax

DEMO

NOTES

5 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related