如何使用 datatable.js 在 tbody 中使用 rowspan 和 colspan？

Posted 2023-05-07

技术标签:

【中文标题】如何使用 datatable.js 在 tbody 中使用 rowspan 和 colspan？【英文标题】：How to use rowspan and colspan in tbody using datatable.js? 【发布时间】：2015-02-02 03:15:42 【问题描述】：

每当我使用<td colspan="x"></td> 时，我都会收到以下错误：

未捕获的类型错误：无法设置未定义（…）的属性“_DT_CellIndex”

演示

$("table").DataTable();

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>

<table style="width:50%;">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td colspan="2">3 4</td>
      <td colspan="3">4 5 6</td>
    </tr>
  </tbody>
</table>

在没有 DataTables.js 的情况下它可以正常工作，但是当我们将此结构与 datatable.js 一起使用时，它就无法正常工作。我们需要上表结构。有谁知道我们如何使用这个表结构 datatable.js？

【问题讨论】：

目前，数据表不支持行跨度或列跨度到表体。 Reference 但是，可能的解决方案应该是 DataTables hidden row details example 希望它有效。我已经给出了代码，请查看以下网址***.com/questions/32088676/… 【参考方案1】：

您可以通过为每个已消除的单元格添加一个“不可见”单元格来解决缺少 colspan 支持的问题：

<tr>
 <td colspan="3">Wide column</td>
 <td style="display: none;"></td>
 <td style="display: none;"></td>
</tr>
<tr>
 <td>Normal column</td>
 <td>Normal column</td>
 <td>Normal column</td>
</tr>

DataTables 不会报错，表格呈现正常并且排序正常（不可见列排序为空字符串）。

我没有用rowspan尝试过这个。

【讨论】：

请注意，如果您启用了scrollX，则单元格会与此解决方案完全不一致：jsfiddle.net/3aprx7wk/4 用rowspan 试过这个也可以，但排序可能会破坏布局。 @Protocole 面临同样的排序问题.. 有什么解决办法吗？对不起，@BharatGeleda，我只是不需要它并禁用它。非常好，谢谢先生！我在使用引导程序时添加了一个，现在它工作正常。【参考方案2】：

COLSPAN：Ajax 或 javascript 来源数据

Dirk Bergstrom 提供的出色解决方案仅适用于 html 源数据。

也可以对来自 Ajax 的数据使用相同的想法。

在表格正文中创建TR 元素时，您需要使用createdRow 选项来修改所需的单元格。

例如：

var table = $('#example').DataTable(
    ajax: 'https://api.myjson.com/bins/qgcu',
    createdRow: function(row, data, dataIndex)
        // If name is "Ashton Cox"
        if(data[0] === 'Ashton Cox')
            // Add COLSPAN attribute
            $('td:eq(1)', row).attr('colspan', 3);

            // Hide required number of columns
            // next to the cell with COLSPAN attribute
            $('td:eq(2)', row).css('display', 'none');
            $('td:eq(3)', row).css('display', 'none');

            // Update cell data
            this.api().cell($('td:eq(1)', row)).data('N/A');
        
    
);

有关代码和演示，请参阅 this example。

更多详情请参阅jQuery DataTables: COLSPAN in table body TBODY - Ajax data 文章。

行跨度

可以使用RowsGroup插件模拟ROWSPAN属性。

要使用该插件，您需要包含 JavaScript 文件 dataTables.rowsGroup.js 并使用 rowsGroup 选项来指示要应用分组的列的索引。

var table = $('#example').DataTable(
   'rowsGroup': [2]
);

有关代码和演示，请参阅 this example。

更多详情请参阅jQuery DataTables: ROWSPAN in table body TBODY 文章。

COLSPAN 和 ROWSPAN

如果我们结合上述两种解决方法，可以同时对单元格进行垂直和水平分组。

有关代码和演示，请参阅 this example。

更多详情请参阅jQuery DataTables: COLSPAN in table body TBODY - COLSPAN and ROWSPAN 文章。

【讨论】：

【参考方案3】：

如果您使用的是scrollX

<thead>
<tr>
 <th style="width: 20px;"></th>
 <th>column H</td>
 <th>column H</td>
</tr>
</thead>
<tbody>
<tr>
 <td colspan="3">Wide column</td>
 <td style="display: none;"></td>
 <td style="display: none;"></td>
</tr>
<tr>
 <td>123</td>
 <td>Normal column</td>
 <td>Normal column</td>
</tr>
</tbody>

#Dirk_Bergstrom 的修改答案

【讨论】：

【参考方案4】：

简单的解决方案就在这里。

<tr>
    <td colspan="4">details</td>
    <td style="display: none"></td>
    <td style="display: none"></td>
    <td style="display: none"></td>
</tr>

没有其他解决方案 https://datatables.net/forums/discussion/33497/cannot-set-property-dt-cellindex-of-undefined

【讨论】：

【参考方案5】：

参考下面的链接。

fnFakeRowspan

也可以参考这里的插件。

fnFakeRowspan plugin

希望对你有帮助

【讨论】：

【参考方案6】：

我不知道在什么时候，但我猜 fnFakeRowspan 不支持当前的 DataTable 版本。

对于替代方案，请查看 RowsGroup 插件。