Php 如何使用jQueryDataTables在数据库的HTML表中显示特定数量的项？

我对表使用了以下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>

根据上面的代码，默认情况下，页面中只显示前五项，但它显示从数据库检索到的所有项。此外，它不显示分页。让我们检查以下图像：

我需要从记录选择框15、20或全部中选择另一个选项，以显示项目的具体数量以及分页，同样，当我在记录选择框中选择5时，表格工作正常。让我们检查一下图像：

问题是：加载页面时，默认情况下选择5，但表显示了基于查询在数据库中找到的所有项。当我从选择框中选择15、20或全部时，表格显示15、20或全部记录，再次选择5时，它显示5条记录

有人能告诉我JS代码数据表或HTML、PHP代码中有什么错误吗？如何解决此问题。

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

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

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

有用链接：

如果希望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>

---

您正在运行哪个版本的Datatables？将菜单设置为5没有意义，但默认长度可能设置为10。在dataTableNo上仅使用pageLength:5进行测试，仍然不起作用。如果我使用pageLength:5，页面中会显示一个下拉列表，其值为10、25、50和100，但会显示数据库中的所有数据。