Javascript 如何提交包含jQuery数据表的所有页面中的复选框

我试图为每一行获取第一个单元格（

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中不存在的元素
转换为

var table=$（'#示例'）.DataTable({
//…跳过。。。
});
$（'form'）。关于（'submit'，函数（e）{
var$form=$（此）；
//迭代表中的所有复选框
表.$（'input[type=“checkbox”]”）。每个（函数（）{
//如果DOM中不存在复选框
如果（！$包含（文档，本））{
//如果选中复选框
如果（选中此项）{
//创建一个隐藏元素
$form.append(
$('')
.attr（'类型'，'隐藏'）
.attr（'name'，this.name）
.val（此.value）
);
}
} 
});          
});

解决方案2：通过Ajax发送数据
var table=$（'#示例'）.DataTable({
//…跳过。。。
});
$（“#btn提交”）。在（'click'，函数（e）{
e、 预防默认值（）；
var data=table.$（'input[type=“checkbox”]”）。serializeArray（）；
//如有必要，包括额外数据
//push（{'name'：'extra_param'，'value'：'extra_value'}）；
$.ajax({
url:“/path/to/your/script.php”，
数据：数据
}).完成（功能（响应）{
console.log（'Response'，Response）；
});
});

演示
有关更多详细信息和演示，请参阅

笔记

每个复选框都应该有一个
值
属性，该属性具有唯一的值
避免对多个元素使用
id
属性
check
，该属性应该是唯一的
您不需要显式启用
分页
、
信息
等。对于jQuery数据表，默认情况下会启用这些选项
考虑使用函数对HTML实体进行正确编码。例如，



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


变量表=$（'#数据表示例'）。数据表({
//…跳过。。。
});
$（'form'）。关于（'submit'，函数（e）{
var$form=$（此）；
表.$（'input[type=“checkbox”]”）。每个（函数（）{
如果（！$包含（文档，本））{
如果（选中此项）{
$form.append(
$('')
.attr（'类型'，'隐藏'）
.attr（'name'，this.name）
.val（此.value）
);} } }); });

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

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

Gyrocode.com提供了非常好的代码，但是如果您的行中有一些其他隐藏值，那么您也必须在表单中创建它们

我使用：


var table=$（'#示例'）.DataTable({
//…跳过。。。
});
$（“#按钮验证”）。单击（函数（）{
table.page.len（-1.draw（）；
});显示代码如何在第一页中获得价值。这是事件授权的问题。我是jquery的新手。请帮助我编辑上面的代码。@athira，您的HTML中是否有带有
action
属性的
form
标记，还是通过Ajax提交表单？@athira，通过Ajax@Gyrocode.com，我想使用第二个选项，但我有其他数据要随复选框一起发送。我该怎么做？@PrashantPokhriyal，您可以按如下方式做：
var data=table.$（'input[type=“checkbox”]”）。serializeArray（）；push（{'name'：'extra_param'，'value'：'extra_value'}）data
实现
ajax（）
函数。您能对提供的代码添加一些解释吗？
    $('form').on('submit', function (e) {
        $('.datatable').DataTable().destroy();
    });