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

【问题标题】：DataTables - Not working when added colspan for the last columnDataTables - 为最后一列添加 colspan 时不起作用
【发布时间】：2013-10-25 22:59:25
【问题描述】：

我在使用 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({
});

有什么解决办法吗？

【问题讨论】：

标签： jquery html datatables

【解决方案1】：

您可以在 tr 的末尾添加隐藏列，而不是使用 complex header example，在我看来，这很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>

【讨论】：

我喜欢这个。这也很容易。但应更改添加到<td> 而不是<tr>。像这样，<td style="display: none"></td>
@Achyut，哦，是的，当然，对不起，这是我的印刷错误！我会解决的。
好技巧！谢谢！
谢谢。这真的很有帮助。

【解决方案2】：

DataTables doesn't support colspans like you're using them。请关注他们的complex header example。

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

【讨论】：

是的。当tr 都在thead 中时，它可以工作。当我将第二个tr 放入tbody 时，它不起作用。
如果它是头部的一部分，为什么要把它放在tbody 中？
试试this solution
内容的宽度将显示为合并单元格？

【解决方案3】：

dataTable 不支持 colspan 或 rowspan。

如果您使用 colspan，dataTable 将无法理解列数/计算，在这种情况下返回 undefined 并引发错误。

所以我们需要做的是告诉dataTable，万一它没有得到预期的结果，应该是什么替代方法。

为此，我们将使用：defaultContent 属性，当然还有指定目标/受影响的列。

例如：在有 3 个 td 的表上，如果我们使用 td colspan="2"，我们将不得不为其他 2 个设置默认值（因为已经存在一个 - 而且它是第一个）。

代码：

"aoColumnDefs": [{
  "aTargets": [2,3],
  "defaultContent": "",
}]

【讨论】：

仅对 HTML 和 javascript 的完整代码 sn-ps 使用 stack sn-ps。否则，只需使用代码工具格式化您的回答（看起来像{ }）
如果您已经为每一列指定了 aoColumnDefs，您可以在末尾添加“defaultContent”属性，如下所示："aoColumns": [ null, {"bSortable": true, "defaultContent":""}, {"bSortable": true, "defaultContent":""}]

【解决方案4】：

另一种方法是使用Child rows。这最终将在父级下方添加一行，如下图所示

代码

var table =jQuery('#bwki_sites_display').DataTable( {
    'pageLength': 10,
    'lengthMenu': [ 10, 20, 50, 100, 200 ],
    'order': [[ 0, 'desc' ]],

    }
);
table.rows().every( function () {
    var row = table.row( $(this));
    html = '<i class="fa fa-plus"></i>Colspan will come here';              
    row.child(html).show();
    $(this).addClass('shown');                                              
});

【讨论】：

感谢这段代码，但是当我点击下一页时这将不起作用
我在第一个版本的代码中遇到了同样的问题，可以在编辑历史中看到。但是上面的代码在所有页面中都对我很好

【解决方案5】：

我知道这是一个老话题，但我遇到了同样的问题。 <th colspan="2"> 可以正常工作，但奇怪的是，只有在最后一列中使用它才能正常工作。

所以

这不行

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

但这是有效的。

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

在

【讨论】：