DataTables - 在最后一列添加colspan时不起作用 [英] DataTables - Not working when added colspan for the last column

问题描述

我在使用DataTables时遇到问题。当我为最后一列添加colspan时，datatable插件不会应用于表。如果我删除最后一个的colspan，并把它放到任何其他列，它是有效的。

I've a problem using DataTables. When i add colspan for the last column, the datatable plugin wont get applied to the table. If i remove the colspan for the last one and put it to any other column, it works.

例如 -

<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({
});

任何解决方案？

推荐答案

DataTables不支持像你这样的colspans使用他们请按照复杂的标题示例。

使用表格显示数据时，您通常希望以组的形式显示
列信息。 DataTable在标题中完全支持colspan和
rowspans，将所需的排序侦听器分配给
适用于该列的TH元素。 每列必须有一个TH
单元格（只有一个），它是唯一的，它可以让监听器添加
。 下面显示的示例核心浏览器信息
组合在一起。

When using tables to display data, you will often wish to display column information in groups. DataTables fully supports colspan and rowspans in the header, assigning the required sorting listeners to the TH element suitable for that column. Each column must have one TH cell (and only one) which is unique to it for the listeners to be added. The example shown below has the core browser information grouped together.

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

您的等价物将如下所示：

Your equivalent would look something like this:

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

这篇关于DataTables - 在最后一列添加colspan时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！