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

2022-01-01 00:00:00 datatables jquery php javascript ajax

我正在尝试为每一行获取第一个单元格 (td) 并获取它,但仅限于当前页面.如果我导航到下一页,则不会发送上一页上选中的复选框.

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>

推荐答案

CAUSE

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

CAUSE

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.

你需要把元素<input type="checkbox">被选中的并且在DOM中不存在的元素转成<input type="hidden"> 表单提交时.

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

解决方案 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 数据表:如何提交所有页面表单数据以获取更多详细信息和演示.

DEMO

See jQuery DataTables: How to submit all pages form data for more details and demonstration.

  • 每个复选框都应该有一个value 属性,并分配有唯一值.
  • 避免对多个元素使用id属性check,这个属性应该是唯一的.
  • 您不需要为 jQuery DataTables 显式启用 paginginfo 等选项,这些选项是默认启用的.
  • 考虑使用 htmlspecialchars() 函数来正确编码 HTML 实体.例如, <?php echo htmlspecialchars($fet['trk']);?>.
  • Each checkbox should have a value attribute assigned with unique value.
  • Avoid using id attribute check for multiple elements, this attribute is supposed to be unique.
  • You don't need to explicitly enable paging, info, etc. options for jQuery DataTables, these are enabled by default.
  • Consider using htmlspecialchars() function to properly encode HTML entities. For example, <?php echo htmlspecialchars($fet['trk']); ?>.

相关文章