How to submit checkboxes from all pages with jQuery DataTables

Asked
Active3 hr before
Viewed126 times

7 Answers

checkboxessubmitpages
90%

Encode a set of form elements as an array of names and values using serializeArray() jQuery method,Retrieve form elements from all pages using $() jQuery DataTables API method,There are at least two solutions that will allow to submit form elements from all pages.,jQuery DataTables keeps only current page rows in DOM for performance and compatibility reasons.

$(document).ready(function (){
   var table = $('#example1').DataTable({
      pageLength: 4
   });

   // Handle form submission event
   $('#frm-example1').on('submit', function(e){
      var form = this;

      // Encode a set of form elements from all pages as an array of names and values
      var params = table.$('input,select,textarea').serializeArray();

      // Iterate over all form elements
      $.each(params, function(){     
         // If element doesn't exist in DOM
         if(!$.contains(document, form[this.name])){
            // Create a hidden element 
            $(form).append(
               $('<input>')
                  .attr('type', 'hidden')
                  .attr('name', this.name)
                  .val(this.value)
            );
         } 
      });      
   });
});
load more v
88%

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. – Gyrocode.com Aug 1 '18 at 12:58 , @Gyrocode.com, I want to use second options but I've additional data to send along with checkboxes. How can I do it? – Prashant Pokhriyal Aug 1 '18 at 9:24 ,Connect and share knowledge within a single location that is structured and easy to search.,See jQuery DataTables: How to submit all pages form data for more details and demonstration.

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);
   });
});
load more v
72%

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.,See jQuery DataTables: How to submit all pages form data for more details and demonstration.,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.,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

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>
load more v
65%

For example, if I have 5 pages of data, and I select 2 check boxes from each page (totaling 10), only the values of 2 of the check boxes get passed on.,I submit the check boxes to the next page, it only sends the values of the currently showing page.,The page it's on is an administrative page, not a public facing one. If it makes any difference, when I select multiple check boxes on different pages, the check boxes do remain selected properly - the problem is that when I submit the check boxes to the next page, it only sends the values of the currently showing page.,In which case can you link to the page showing the issue so I can debug it please? As you will be able to see in this example row selection should be retained as the DataTable page changes.

Just for the sake of testing, I had this:

 $(document).on('submit', 'selection', function(e) {
    var ads = [];

    // 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) {
             ads.push(($(this).val(this.value)));
             console.log(ads);
          }
       }
    });
 });
load more v
75%

How to check all except disabled ?,how to skip records in linq c#,Normally jQuery datatable will display 10 records at a time. If we select using paging max it will show 100. If user needs to select all records form all pages. Below example I will show you how to select all records from all pages of jQuery datatable and same way if user unchecks select all checkbox it will uncheck checkboxes from all pages.,Hello world using Jquery?

0
40%

See jQuery DataTables: How to submit all pages form data for more information and demonstration.,jQuery DataTables removes non-visible rows from DOM for performance reasons, that is why when you submit the form only visible checkboxes get submitted.,For example, to submit form with values of all checkboxes:,For example, to submit form via Ajax with values of all checkboxes:

I have just a straight html table layout for it.

<table class="display" id="contactsTable">
   <thead>
      <tr>
         <th>Id</th>
         <th>Email</th>
         <th>Name</th>
         <th>Phone</th>
         <th>City</th>
         <th>State</th>
         <th>Arrival</th>
         <th>Departure</th>
         <th>Inserted</th>
         <th>Check</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>301</td>
         <td>email address</td>
         <td>Test</td>
         <td></td>
         <td></td>
         <td></td>
         <td>July 14 2011</td>
         <td>July 23 2011</td>
         <td>April 12 2011 07:05</td>
         <td><input type="checkbox" name="selected[]" value="301" class="chkbox" /></td>
      </tr>
      <tr>
         <td>300</td>
         <td>email</td>
         <td>Test</td>
         <td></td>
         <td></td>
         <td></td>
         <td>September 02 2011</td>
         <td>September 10 2011</td>
         <td>April 11 2011 12:01</td>
         <td><input type="checkbox" name="selected[]" value="300" class="chkbox" /></td>
      </tr>

Here is my code for submit (just temp).

<input id="submitButton" type="submit" value="Submit" onclick="test()" />

And my javascript to map the checkboxes to an array.

function test() {
   var values = $('input:checkbox:checked.chkbox').map(function() {
      return this.value;
   }).get();
   console.log(values);
}

Here is the datatables code

 $(document).ready(function() {

          var selected;
          var selectedOutput = '#selectedOutput';
          var template = 'selectedTemplate';
          var submitButton = '#submitButton'

          var dTable = $('#contactsTable').dataTable({
             "bJQueryUI": true,
             "sPaginationType": "full_numbers",
             "bPaginate": true,
             "bLengthChange": true,
             "bFilter": true,
             "bSort": false,
             "bInfo": true,
             "bAutoWidth": false,
             "bProcessing": true,
             "aoColumns": [{
                   "bVisible": false
                }, //keep the id invisble    
                null,
                null,
                null,
                null,
                null,
                null,
                null,
                null,
                null
             ]
          });
load more v
22%

$(document).ready(function() {
   var oTable = $('#example').dataTable({
      stateSave: true
   });

   var allPages = oTable.fnGetNodes();

   $('body').on('click', '#selectAll', function() {
      if ($(this).hasClass('allChecked')) {
         $('input[type="checkbox"]', allPages).prop('checked', false);
      } else {
         $('input[type="checkbox"]', allPages).prop('checked', true);
      }
      $(this).toggleClass('allChecked');
   })
});

Other "checkboxes-submit" queries related to "How to submit checkboxes from all pages with jQuery DataTables"