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

Posted 2023-02-24

【中文标题】如何使用 jQuery DataTables 从所有页面提交复选框

【英文标题】：How to submit checkboxes from all pages with jQuery DataTables

【发布时间】：2016-01-19 08:01:34

【问题描述】：

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

【问题讨论】：

在第一页展示你如何获得价值的代码。这是事件委托中的问题。

【参考方案1】：

原因

出于性能原因，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: How to submit all pages form data了解更多详情和演示。

注意事项

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

【讨论】：

哦。我是 jquery 的新手。请帮我编辑上面的代码。

@athira，您的 HTML 中是否有带有 action 属性的 form 标记，还是通过 Ajax 提交表单？

@athira，添加了通过 Ajax 提交表单的示例代码

@Gyrocode.com，我想使用第二个选项，但我还有其他数据要与复选框一起发送。我该怎么做？

@PrashantPokhriyal，你可以这样做：var data = table.$('input[type="checkbox"]').serializeArray(); data.push('name': 'extra_param', 'value': 'extra_value');，然后使用data作为ajax()函数。

【参考方案2】：

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

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

【参考方案3】：

    <form action="Nomination" name="form">    
    <table  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>

这是工作代码

【讨论】：

您可以对您提供的代码添加一些解释吗？

【参考方案4】：

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

我用：

var table = $('#example').DataTable(
   // ... skipped ...
);

$("#buttonValidation").click(function()			
			 	table.page.len(-1).draw();			  
);

它只是在屏幕上显示所有数据表而不分页，然后再以表单形式发送。也许如果你想隐藏显示，你可以使用 css opacity :0 （但不是 display:none）。