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