使用PHP+MySQL加载数据时Datatable.js搜索栏和排序功能缺失

问题原因排查 #

你使用的是jQuery DataTables表格组件，功能失效的核心原因是表格DOM结构不规范，以及可能存在初始化时机错误，具体问题如下：

• 表头（thead）、表尾（tfoot）定义的列数和表体（tbody）的列数不匹配：你的thead里定义了6个<th>，但tbody的每一行写了7个<td>，多出来的列会导致DataTables初始化时解析结构失败，功能异常。其中<td><?php echo display($teacher_email,6) ?></td> -->是未删除干净的旧代码，额外多占了一列。
• 循环输出行的结束标签写错：你在每一行内容输出后写的是<tr>，而不是闭合行的</tr>，会导致浏览器解析表格时生成错误的嵌套结构，破坏表格布局。
• 可能存在初始化时机错误：如果你的DataTables初始化代码写在表格DOM之前，或者在页面还没渲染完PHP输出的内容就执行初始化，也会导致功能失效。

修复步骤 #

1. 先修正表格结构错误，删除冗余的列、修正行闭合标签：

<div class="row" style="margin-top:20px;">
   <div class="col-sm-12">
        <div class="panel panel-primary">
            <div class="panel-heading">TEACHER LIST</div>
            <div class="panel-body">
            <table id="teacher-record" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>School Name</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                        $i = 0; // 先初始化$i变量避免报错
                        foreach ( $teacher as $user ) {
                            $teacher_email = $user->user_email;
                    ?>
                    <tr>
                        <td><?php echo $i+= 1; ?></td>
                        <td><?php 
                            //Displays School Name
                            global $wpdb;
                            echo display($teacher_email,4)
                        ?></td>
                        <td><?php echo esc_html( $user->first_name ) ?></td>
                        <td><?php echo esc_html( $user->last_name ) ?></td>
                        <td><?php echo esc_html( $user->user_email ) ?></td>
                        <td>
                            <button class="btn btn-success btn-view-shelf" data-id="<?php echo esc_html( $user->ID ); ?>">View</button>
                            <button class="btn btn-info btn-update-shelf" data-id="<?php echo esc_html( $user->ID ); ?>">Edit</button>
                            <button class="btn btn-danger btn-delete-shelf" data-id="<?php echo esc_html( $user->ID ); ?>" data-email="<?php echo esc_html( $user->user_email ); ?>">Delete</button>
                        </td>
                    </tr> <!-- 修正为闭合的</tr>标签 -->
                    <?php } ?>
                </tbody>
                <tfoot>
                    <tr>
                        <th>ID</th>
                        <th>School Name</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Action</th>
                    </tr>
                </tfoot>
            </table>
            </div>
        </div>   
    </div>
</div>

2. 调整DataTables初始化代码的位置，保证在表格DOM加载完成后再执行，推荐把初始化代码放在页面底部，或者包裹在jQuery的DOM加载完成回调里：

// 确保DOM完全渲染后再初始化表格
$(document).ready(function() {
    $('#teacher-record').DataTable();
});

内容的提问来源于stack exchange，提问作者Michael John Sulayao