如何使用jQuery DataTables从数据库中显示HTML表格中特定数量的项目？

Question

我用下面的HTML & PHP代码表：

<?php 
     $query = "select * from test"; 
     $execute = $conn->query($query); 
    ?> 
    <table class="table table-striped table-bordered table-hover" id="tbl_blood_donar_list"> 
     <thead> 
      <tr> 
       <th>Username</th> 
       <th>Contact No.</th> 
       <th>State</th> 
       <th>City</th> 
      </tr> 
     </thead> 
     <tbody> 
    <?php 
     while($result = $execute->fetch_array()) 
     { 
    ?> 
      <tr> 
       <td><?php echo $result['user_name']; ?></td> 
       <td><?php echo $result['phone_number']; ?></td> 
       <td><?php echo $result['state']; ?></td> 
       <td><?php echo $result['city']; ?></td> 
      </tr> 
    <?php 
     } 
    ?> 

我用下面的代码使用数据表来显示数据库项目到HTML表格：

 <script> 
      $('#tbl_blood_donar_list').dataTable({ 
       "order": [ 
        [0, 'asc'] 
       ], 
       "lengthMenu": [ 
        [5, 15, 20, -1], 
        [5, 15, 20, "All"] 
       ], 
       "pageLength": 10, 
       "columnDefs": [{ 
        'orderable': true, 
        'targets': [0] 
       }, { 
        "searchable": true, 
        "targets": [0] 
       }, 
       { 
        'bSortable' : false, 
        'aTargets' : [3] 
       }] 
      }); 
     </script> 

按照在上面的代码中，只有前五个项目默认显示在页面中，但它显示了从数据库中检索的所有项目。此外，它不显示分页。让我们来看看下面的图片：

Image: Error

，我需要选择从记录中选择框（15，20，或全部）的另一种选择，显示也物品&的具体数量的分页，当我再次选择5在记录选择框中表格工作正常。让我们来看看图片：

Image: Expected result

的问题是：当页面加载5被默认选择，但表显示了基于查询的数据库中找到整个项目。当我从选择框中选择15，或20或全部时，表格将显示15或20或全部记录，当我选择5时，它会显示5条记录。

谁能告诉我我的JS代码（DataTables）或HTML，PHP代码有什么问题？我该如何解决这个问题。

Answer 1

您需要设置pageLength 5，而不是10（顺便说一句，10是默认值）：

$('#tbl_blood_donar_list').dataTable({ 
    "pageLength": 5, 
    ... 
}); 

lengthMenu只设置菜单中，但默认情况下仍然每页10个项目。您需要使用"pageLength": n修改默认页面长度，其中n是默认显示的项目数量。

相关链接：

• https://datatables.net/reference/option/pageLength
• https://datatables.net/examples/advanced_init/length_menu.html

更改你的代码（如果你想5默认）：

<script> 
    $('#tbl_blood_donar_list').dataTable({ 
     "order": [[0, 'asc']], 
     "lengthMenu": [[5, 15, 20, -1],[5, 15, 20, "All"]], 
     "pageLength": 5, 
     "columnDefs": [{ 
      'orderable': true, 
      'targets': [0] 
     }, { 
      "searchable": true, 
      "targets": [0] 
     }, { 
      'bSortable' : false, 
      'aTargets' : [3] 
     }] 
    }); 
</script>