如何使用 jQuery DataTables 提交所有页面的复选框 [英] How to submit checkboxes from all pages with jQuery DataTables

问题描述

我正在尝试为每一行获取第一个单元格 (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 显式启用 paging、info 等选项，这些选项是默认启用的.
• 考虑使用 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']); ?>.

这篇关于如何使用 jQuery DataTables 提交所有页面的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！