将DataTable应用于复杂范围列和行后，缺少表格标题

Question

我有一个普通表，其列跨度和行跨度如下所示：

＆＃13;

＆＃13;

<table border="1" id="">
  <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></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>

＆＃13;

＆＃13;

＆＃13;

然后，我想按照here

指示将DataTable应用于上表

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#tbList').dataTable();
})

＆＃13;

<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></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>

＆＃13;

＆＃13;

＆＃13;

然而，问题是缺少属性colspan和rowspan的表标题会使数据不符合列标题。

我的桌子有什么问题，我该如何解决？谢谢。