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

Posted 2023-05-09

【中文标题】如何使用 jQuery DataTables 从数据库中显示特定数量的 HTML 表中的项目？

【英文标题】：How to show specific numbers of items in HTML tables from database using jQuery DataTables?

【发布时间】：2016-01-16 09:24:39

【问题描述】：

我在表格中使用了以下 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 代码有什么问题？我该如何解决这个问题。

【问题讨论】：

你运行的是什么版本的数据表？

将菜单设置为 5 但默认长度为 10 没有意义

【参考方案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>

【讨论】：

可能。仅在 dataTable 上使用 "pageLength": 5 进行测试

不，仍然无法正常工作。如果我使用"pageLength": 5，页面中会显示一个下拉列表，其值为 10、25、50 和 100，但会显示数据库中的所有数据。