DataTables - 为最后一列添加colspan时不起作用

Question

我在使用DataTables时遇到了问题.当我为最后一列添加colspan时,数据表插件不会应用于表.如果我删除最后一个的colspan并将其放到任何其他列,它的工作原理.

例如 -

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="stu_data_table">
   <thead>
      <tr>    
        <th>&nbsp;</th>
        <th colspan="2">&nbsp;</th>
        <th colspan="2">&nbsp;</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
   </tbody>
</table>

$('#stu_data_table').dataTable({
});

对此有何解决方案？

Answer 1

您可以将隐藏列添加到 tr 的末尾，而不是使用复杂的标题示例，它很hacky，但在我看来更简单、更短：

<thead>
  <tr>    
    <th>&nbsp;</th> <!-- column 1 -->
    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    <th colspan="2">&nbsp;</th> <!-- column 4&5 -->

    <!-- hidden column 6 for proper DataTable applying -->
    <th style="display: none"></th> 
  </tr>
</thead>

<tbody>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>

    <!-- hidden column 6 for proper DataTable applying -->
    <td style="display: none"></td>
  </tr>
</tbody>

Answer 2

DataTables不支持您使用它们的colspans.请改为使用复杂的标题示例.

使用表格显示数据时,通常希望以组的形式显示列信息.DataTables完全支持标头中的colspan和rowspans,将所需的排序侦听器分配给适合该列的TH元素.每列必须有一个TH单元(并且只有一个),这对于要添加的侦听器而言是唯一的.下面显示的示例将核心浏览器信息组合在一起.

<thead>
    <tr>
        <th rowspan="2">Rendering engine</th>
        <th rowspan="2">Browser</th>
        <th colspan="3">Details</th>
    </tr>
    <tr>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
    </tr>
</thead>

你的等价物看起来像这样:

<thead>
  <tr>    
    <th rowspan="2">&nbsp;</th> <!-- column 1 -->

    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    <th colspan="2">&nbsp;</th> <!-- column 4&5 -->
  </tr>
 <tr>
    <th>&nbsp;</th> <!-- column 2 -->
    <th>&nbsp;</th> <!-- column 3 -->

    <th>&nbsp;</th> <!-- column 4 -->
    <th>&nbsp;</th> <!-- column 5 -->
 </tr>
</thead>