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