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

我使用以下代码通过 DataTables 将数据库项目显示到 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 代码(数据表)或 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>