14

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>
1
  • show the code how you are getting value in first page. Its the problem in event delegation. Commented Oct 20, 2015 at 15:20

4 Answers 4

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']); ?>.
5
  • oh. am new to jquery. plz help me to edit my code above.
    – athira
    Commented Oct 20, 2015 at 16:08
  • @athira, Do you have a form tag in your HTML with action attribute or do you submit your form via Ajax? Commented Oct 20, 2015 at 17:03
  • @athira, added sample code for form submission via Ajax Commented Oct 21, 2015 at 16:17
  • @Gyrocode.com, I want to use second options but I've additional data to send along with checkboxes. How can I do it? Commented Aug 1, 2018 at 9:24
  • 1
    @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. Commented Aug 1, 2018 at 12:58
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();
    });
1
  • 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.
    – mark_b
    Commented Mar 1, 2022 at 9:50
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

1
  • can you add some explanation of the code you've provided? Commented Dec 16, 2018 at 10:10
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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.