Как отправить флажки со всех страниц с помощью jQuery DataTables

Я пытаюсь получить первую ячейку ( td ) для каждой строки и получить ее, но только для текущей страницы. Если я перейду к следующей странице, то флажок, установленный на предыдущей странице, не будет отправлен.

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

Related of "Как отправить флажки со всех страниц с помощью jQuery DataTables"

ПРИЧИНА

jQuery DataTables удаляет невидимые строки из DOM по соображениям производительности. Когда форма отправляется, на сервер отправляются только данные для видимых флажков.

РЕШЕНИЕ 1. Отправить форму

Вам нужно повернуть элементы <input type="checkbox"> , которые проверяются и не существуют в DOM в <input type="hidden"> при отправке формы.

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

РЕШЕНИЕ 2: отправка данных через 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

См. JQuery DataTables: как отправить данные всех страниц для получения более подробной информации и демонстрации.

ЗАМЕТКИ

  • Каждый флажок должен иметь атрибут value присвоенный уникальным значением.
  • Избегайте использования check атрибута id для нескольких элементов, этот атрибут должен быть уникальным.
  • Вам не нужно явно включать параметры paging , info и т. Д. Для jQuery DataTables, они включены по умолчанию.
  • Рассмотрите возможность использования функции htmlspecialchars() для правильного кодирования объектов HTML. Например, <?php echo htmlspecialchars($fet['trk']); ?> <?php echo htmlspecialchars($fet['trk']); ?> .