数据表 - 当最后一列加合并单元格不工作数据表 - 当最后一列加合并单元格不工作(DataTable

我已经使用数据表的问题。 当我最后一列加合并单元格，数据表插件不会得到应用到表。 如果我删除合并单元格的最后一个并把它放到任何其他列，它的工作原理。

例如 -

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

就像你正在使用他们的数据表不支持colspans 。 按照其复杂的头例子来代替。

当使用表中显示的数据，你会经常想显示在组列信息。 数据表完全支持在头列跨度和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>

Answer 2:

dataTable中不支持合并单元格或行跨度。

如果使用合并单元格，dataTable的不会明白的列数/度计算，返回不确定的，在这种情况下抛出一个错误。

因此，我们需要做的，就是告诉dataTable的，在情况下，它并没有得到预期的结果，应该是什么可供选择的一个。

为此，我们将使用：defaultContent财产，当然expecifying目标/受影响的列。

例如：上表3 TD的，如果我们使用TD合并单元格=‘2’，我们将不得不对其他2设置的默认值（因为一个已经存在-这是第一个）。

码：

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

Answer 3:

一种替代的方法是使用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');                                              
});

文章来源: DataTables - Not working when added colspan for the last column