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

问题描述

我在使用数据表时遇到问题.当我为最后一列添加 colspan 时，数据表插件不会应用于表.如果我删除最后一列的 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 不支持像您使用它们那样的 colspan.改用他们的复杂标题示例.

当使用表格显示数据时，您通常希望显示分组中的列信息.DataTables 完全支持 colspan 和标题中的行跨度，将所需的排序侦听器分配给适用于该列的 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>

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