如何在PHP渲染的表格中嵌入DataTables？筛选功能异常求助

问题描述 #

在PHP生成的表格中集成DataTables时，无论使用本地资源还是CDN加载jQuery、DataTables的CSS和JS文件，筛选功能始终无法正常显示。

现有代码 #

1. CSS引入 #

<link rel="stylesheet" type="text/css" href="assets/libs/bootstrap/dist/css/jquery.dataTables.min.css">

2. 表格代码（PHP生成） #

<table style="border-color:cadetblue;" id="dt_basic" class="table table-striped table-hover m-0 rounded-pill display dataa">
    <tr class="nasiabg2 table-active text-white border-1 border-light">
        <!--<th class="text-white">Reference</th>-->
        <th class="text-white">Fund Name</th>
        <th class="text-white">NaSIA Classification</th>
        <th class="text-white">Initial Fees</th>
        <th class="text-white">Max Initial Fees</th>
        <th class="text-white">NAV</th>
    </tr>
    <tbody class="border-light"> <?php for ($j=0;$j<$fDaily->num_rows();$j++) {?> <tr>
        <td> <?php echo $fDaily->row($j)->fund;?> </td>
        <td> <?php echo $fDaily->row($j)->asset_class." - ".$fDaily->row($j)->style." - ".$fDaily->row($j)->region;?> </td>
        <td> <?php echo $fDaily->row($j)->init_fee;?> </td>
        <td> <?php echo $fDaily->row($j)->max_ann_fee;?> </td>
        <td> <?php echo $fDaily->row($j)->nav;?> </td>
    </tr> <?php }?> </tbody>
</table>

3. JavaScript引入 #

<script src="assets/libs/bootstrap/dist/js/jquery-3.5.1.js"></script>
<script src="assets/libs/bootstrap/dist/js/jquery.dataTables.min.js"></script>

当前表格效果 #

解决方法 #

1. 添加DataTables初始化代码 #

仅引入资源不够，必须在页面加载完成后初始化表格，新增以下JS代码：

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

2. 修正表格结构 #

DataTables要求标准的表格结构：表头行必须放在<thead>标签内，修正后的表格代码：

<table style="border-color:cadetblue;" id="dt_basic" class="table table-striped table-hover m-0 rounded-pill display dataa">
    <thead>
        <tr class="nasiabg2 table-active text-white border-1 border-light">
            <!--<th class="text-white">Reference</th>-->
            <th class="text-white">Fund Name</th>
            <th class="text-white">NaSIA Classification</th>
            <th class="text-white">Initial Fees</th>
            <th class="text-white">Max Initial Fees</th>
            <th class="text-white">NAV</th>
        </tr>
    </thead>
    <tbody class="border-light"> 
        <?php for ($j=0;$j<$fDaily->num_rows();$j++) {?> 
        <tr>
            <td><?php echo $fDaily->row($j)->fund;?></td>
            <td><?php echo $fDaily->row($j)->asset_class." - ".$fDaily->row($j)->style." - ".$fDaily->row($j)->region;?></td>
            <td><?php echo $fDaily->row($j)->init_fee;?></td>
            <td><?php echo $fDaily->row($j)->max_ann_fee;?></td>
            <td><?php echo $fDaily->row($j)->nav;?></td>
        </tr> 
        <?php }?> 
    </tbody>
</table>

3. 检查资源路径与版本兼容性 #

• 确认本地资源路径是否正确，比如jquery.dataTables.min.css是否存在于指定目录，JS文件同理。
• 若使用CDN，确保jQuery和DataTables版本兼容，推荐使用匹配的稳定版本：

  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
  <!-- JS -->
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  

4. 利用浏览器控制台排查错误 #

按F12打开开发者工具，查看Console面板的报错信息，比如资源加载失败、语法错误等，快速定位问题根源。

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