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

DataTables doesn't support colspans like you're using them。请改为关注complex header example。

使用表格显示数据时，您通常希望显示组中的列信息。 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>

Answer 2

dataTable不支持colspan或rowspan。

如果使用colspan，dataTable不会理解列计数/计算，返回undefined并在这种情况下抛出错误。

所以我们需要做的是告诉dataTable，如果它没有得到预期的结果，应该选择什么。

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

例如：如果我们使用 td colspan =＆＃34; 2＆＃34; ，在3 td 的桌面上，我们将不得不设置其他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');                                              
});

Answer 4

代替使用complex header example，您可以将隐藏的列添加到tr的末尾，这很麻烦，但我认为它更简单，更短：

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

at

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

5 个答案: