如何使用jQuery DataTables从所有页面提交复选框

How to submit checkboxes from all pages with jQuery DataTables

本文关键字：提交 复选框 何使用 jQuery DataTables      更新时间：2023-09-26

我正在尝试获取每一行的第一个单元格(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>

原因

jQuery DataTables 出于性能原因从 DOM 中删除不可见的行。提交表单时，仅将可见复选框的数据发送到服务器。

解决方案 1.提交表格

您需要在表单提交时将选中且在 DOM 中不存在的元素<input type="checkbox">转换为<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();
   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);
   });
});

演示

请参阅 jQuery DataTables： 如何提交所有页面表单数据以获取更多详细信息和演示。

笔记

  • 每个复选框都应分配有唯一值的value属性。
  • 避免对多个元素使用id属性check，此属性应该是唯一的。
  • 你不需要显式启用 jQuery DataTable 的paging、info 等选项，这些选项是默认启用的。
  • 请考虑使用htmlspecialchars()函数正确编码 HTML 实体。例如，<?php echo htmlspecialchars($fet['trk']); ?> .

您不必在提交之前在表单上制作隐藏元素，只需在提交之前销毁数据表，它将像往常一样提交所有页面上的所有复选框

    $('form').on('submit', function (e) {
        $('.datatable').DataTable().destroy();
    });

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

并添加具有正确表单 ID 和表 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>

这是工作代码

Gyrocode.com 的好代码，但是如果您的行中还有其他一些隐藏值，您也必须在表单中创建它们。

我使用 ： 

var table = $('#example').DataTable({
   // ... skipped ...
});
$("#buttonValidation").click(function(){			
			 	table.page.len(-1).draw();			  
});

它只是在屏幕上显示所有数据表，而无需分页，然后再将其发送到表单中。也许如果你想隐藏显示，你可以使用css不透明度：0(但不是显示：无(。

相关文章：