DataTables仅显示1条数据库数据、搜索功能异常问题咨询

问题现象 #

• 表格分页仅显示「1到1条，共1条」，实际数据库可检索到5条匹配数据
• 搜索栏交互时出现异常效果

问题根因 #

• 核心错误为HTML表格结构不合法：PHP循环逻辑错误，仅第一条数据位于<tbody>标签内部，其余数据被输出到<tbody>闭合标签外，不属于DataTables默认读取的表格主体范围，因此仅能统计到1条数据。
• 附带问题：存在重复DOM id、tbody行内使用表头标签<th>、按钮类型不规范等问题。

修正方案 #

1. 修正表格输出逻辑 #

将循环相关的<tr>、</tr>标签移入循环内部，确保所有数据行都位于<tbody>标签范围内，修正后代码如下：

<table class="table table-striped table-hover table-condense" id="tbl_research">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Research Title</th>
            <th scope="col">Research Type</th>
            <th scope="col">Research Author</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <?php
        include 'includes/connection_operation.php';
        $sql = "SELECT * FROM tbl_repository";
        $query = mysqli_query($conn, $sql);

        if($query) {
            while($row = mysqli_fetch_assoc($query)) {
        ?>
        <tr>
            <td><?php echo $row['ID']; ?></td>
            <td><?php echo $row['research_title']; ?></td>
            <td><?php echo $row['research_type']; ?></td>
            <td><?php echo $row['research_author']; ?></td>
            <td>
                <input type="button" name="research_view" value="View" class="btn btn-info" 
                data-toggle="modal" data-target="#viewResearchModal<?php echo $row["ID"];?>">
            </td>
        </tr>
        <?php 
                include './helper/modal_viewresearch.php';
            }
        } else {
            echo "<tr><td colspan='5'>数据查询失败：" . mysqli_error($conn) . "</td></tr>";
        }
        ?>
    </tbody>
</table>

2. 插件引入逻辑无需大改 #

原有CDN引入符合依赖顺序要求（jQuery在DataTables JS之前加载），初始化代码保持不变即可：

$(document).ready(function() {
    $('#tbl_research').DataTable();
});

调试验证方法 #

打开页面源代码，检查所有PHP输出的数据行都位于<tbody>与</tbody>标签之间，无行内容溢出到tbody外部即可。

内容的提问来源于stack exchange，提问作者Kai