Bootstrap框架下带rowspan的DataTable表格搜索及导出按钮不显示问题

问题根因 #

DataTable初始化要求<tbody>内每一行的单元格数量必须和<thead>的表头列数完全匹配，你使用rowspan合并单元格后，被合并的行缺少对应位置的单元格，导致DataTable初始化静默失败，搜索框、导出按钮等控件就不会渲染。

解决方案 #

完全保留rowspan视觉效果的前提下，按以下步骤修改即可：

1. 补全隐藏占位单元格 #

所有被rowspan合并的行，在缺失单元格的对应位置添加带隐藏样式的<td>，确保每一行的单元格总数和表头列数一致，你用的是Bootstrap框架，直接加d-none类即可实现隐藏，不会影响视觉上的合并效果。
同时注意删除你现有代码里多余的孤标签</form>，避免DOM解析异常。

修改后的tbody示例代码：

<tbody>
  <!-- 第1组共4行，前两列合并 -->
  <tr>
   <td rowspan="4" class="bg-white">1.</td>
   <td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
   <td>Coordinator</td>                                                                                                                                                     
   <td>10/12/2021</td>
   <td>12/12/2021</td>
   <td>13/12/2021</td>
   <td>
     <div class="d-flex">
       <button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
       <a type="button" class="btn btn-danger btn-xs">Remove</a>
     </div>
   </td>
  </tr>
  <tr>
    <!-- 补前两列隐藏占位单元格 -->
    <td class="d-none"></td>
    <td class="d-none"></td>
    <td>角色2</td>
    <td>xxx</td>
    <td>xxx</td>
    <td>xxx</td>
    <td>操作按钮</td>
  </tr>
  <tr>
    <td class="d-none"></td>
    <td class="d-none"></td>
    <td>角色3</td>
    <td>xxx</td>
    <td>xxx</td>
    <td>xxx</td>
    <td>操作按钮</td>
  </tr>
  <tr>
    <td class="d-none"></td>
    <td class="d-none"></td>
    <td>角色4</td>
    <td>xxx</td>
    <td>xxx</td>
    <td>xxx</td>
    <td>操作按钮</td>
  </tr>
  <!-- 后续其他合并组按相同规则补全 -->
</tbody>

2. 确认依赖引入完整 #

导出按钮不显示也可能是缺少相关依赖，确保你已经按顺序引入了以下资源：

• jQuery核心库
• DataTables核心JS、对应主题的CSS/JS（如bootstrap版的dataTables.bootstrap4.js）
• DataTables Buttons插件相关资源：dataTables.buttons.js、buttons.bootstrap4.js、buttons.html5.js
• excel导出依赖：jszip.js
• pdf导出依赖：pdfmake.js、vfs_fonts.js
• 打印功能依赖：buttons.print.js

3. 调整DataTable初始化配置 #

给带合并的列设置禁止排序，避免排序操作打乱单元格合并结构，修改后的初始化代码如下：

$(function () {
    $("#example1").DataTable({
      responsive: true, 
      lengthChange: false, 
      autoWidth: false,
      buttons: ["excel", "pdf", "print"],
      // 前两列为合并列，设置禁止排序
      columnDefs: [
        { orderable: false, targets: [0, 1] }
      ]
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
});

如果需要导出文件也保留单元格合并效果，可以在buttons配置中添加自定义导出回调，根据实际合并规则在导出的文件中设置单元格合并即可。

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