如何使用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> 

推荐答案

原因

由于性能原因，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> ，并将它们存在于< 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发送数据

SOLUTION 2: Send data via Ajax

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

$('#btn-submit').on('click', function(e){
   e.preventDefault();

   $.ajax({
      url: '/path/to/your/script.php',
      data: table.$('input[type="checkbox"]').serialize();
   }).done(function(data){
      console.log('Response', data);
   });
});

演示

请参阅我们的文章 jQuery DataTables - 如何添加一个复选框列< a>用于演示。

DEMO

See our article jQuery DataTables – How to add a checkbox column for demonstration.

• 每个复选框应该有一个 value 属性分配唯一的值。


• 避免使用 id 属性检查为多个元素，这个属性应该是唯一的。


• 你不需要显式地启用 paging ， info 等等jQuery DataTables的选项，默认情况下启用。


• 考虑使用 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屋！