为含colspan/rowspan的复杂表格应用DataTable后表头丢失问题

我来帮你搞定这个DataTables复合表头的问题！你遇到的表头丢失、数据错位问题主要有几个原因，咱们一步步来解决：

问题1：thead里的空行干扰解析 #

你在thead里多了一个空的<tr></tr>，DataTables解析表头的时候会把这个空行当成表头的一部分，直接打乱了复合表头的结构，这是导致表头丢失的关键原因之一。

问题2：HTML标签错误 #

你第一行数据里的<td class="text-right">220938/td>少了左斜杠，应该是</td>，这个语法错误也会影响表格的正常渲染。

问题3：DataTables默认不自动识别复合表头 #

DataTables对带有colspan/rowspan的复合表头需要明确的配置支持，默认配置下它无法正确解析层级表头，导致合并的表头被忽略。

修复后的完整代码 #

我把所有问题都修正了，并且配置了DataTables来支持复合表头：

<!-- 引入依赖 -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<!-- 修复后的表格 -->
<table border="1" id="tbList">
  <thead>
    <tr class="text-center">
      <th rowspan="2">No</th>
      <th rowspan="2">Branch</th>
      <th rowspan="2">Branch Code</th>
      <th colspan="2">Approval</th>
      <th colspan="2">Disbursement</th>
      <th colspan="2">Active Portfolio</th>
      <th colspan="3"># of Active Client</th>
      <th rowspan="2">Active Portfolio</th>
    </tr>
    <tr class="text-center">
      <th># of loans</th>
      <th>$ of Loans</th>
      <th># of loans</th>
      <th>$ of Loans</th>
      <th># of loans</th>
      <th>$ of Loans</th>
      <th>Male</th>
      <th>Female</th>
      <th>Total</th>
    </tr>
    <!-- 删掉了多余的空<tr> -->
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Head Quarter</td>
      <td>HQ</td>
      <td class="text-right">19</td>
      <td class="text-right">220938</td> <!-- 修复了标签错误 -->
      <td class="text-right">11</td>
      <td class="text-right">120938</td>
      <td class="text-right">11</td>
      <td class="text-right">9282726</td>
      <td class="text-right">10</td>
      <td class="text-right">1</td>
      <td class="text-right">11.00</td>
      <td class="text-right">0.263397549755</td>
    </tr>
    <tr>
      <td>2</td>
      <td>New York</td>
      <td>NY</td>
      <td class="text-right">15</td>
      <td class="text-right">112121</td>
      <td class="text-right">7</td>
      <td class="text-right">12120</td>
      <td class="text-right">7</td>
      <td class="text-right">12121</td>
      <td class="text-right">6</td>
      <td class="text-right">1</td>
      <td class="text-right">7.00</td>
      <td class="text-right">12121</td>
    </tr>
    <tr class="text-bold">
      <td>Total:</td>
      <td></td>
      <td></td>
      <td class="text-right">115</td>
      <td class="text-right">21212121</td>
      <td class="text-right">54</td>
      <td class="text-right">134343</td>
      <td class="text-right">54</td>
      <td class="text-right">4232</td>
      <td class="text-right">43</td>
      <td class="text-right">11</td>
      <td class="text-right">54</td>
      <td class="text-right">8.01</td>
    </tr>
  </tbody>
</table>

<script>
$(document).ready(function() {
  $('#tbList').DataTable({
    // 关键配置：确保复合表头的结构和样式被保留
    "headerCallback": function(thead, data, start, end, display) {
      $(thead).find('th').css('vertical-align', 'middle');
    },
    // 可选：固定合计行在底部，避免排序时被打乱
    "orderFixed": [0, 'asc'],
    // 可选：移除合计行的排序高亮样式
    "drawCallback": function(settings) {
      $('.text-bold').removeClass('sorting_1');
    }
  });
});
</script>

关键修复点说明 #

1. 移除thead空行：删掉了多余的<tr></tr>，让DataTables能正确识别两层表头的结构。
2. 修复HTML语法错误：修正了未闭合的<td>标签，确保表格结构合法。
3. 配置DataTables支持复合表头：通过headerCallback维持合并表头的样式，让DataTables自动适配列数匹配数据。
4. 可选优化：添加orderFixed和drawCallback处理合计行的排序问题，保证合计行始终显示在表格底部。

这样处理后，你的复合表头就能正常显示，数据也能和表头正确匹配了！

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