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

How to use rowspan and colspan in tbody using datatable.js?

本文关键字：rowspan colspan tbody 何使用 datatable js      更新时间：2023-09-26

每当我使用<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>

它.js在没有 DataTables 的情况下正常工作，但是当我们将此结构与 datatable 一起使用时.js它不起作用。我们需要上面的表格结构。有没有人知道如何使用这个表结构数据表.js？

您可以通过为每个消除的单元格添加一个"不可见"单元格来解决缺乏 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 不会抱怨，表正常呈现并且排序有效(不可见列排序为空字符串(。

我还没有用行跨度尝试过这个。

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');
        }
    }
});

有关代码和演示，请参阅此示例。

有关更多详细信息，请参阅 jQuery DataTables： COLSPAN in table body TBODY - Ajax data 一文。

行跨

度

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

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

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

有关代码和演示，请参阅此示例。

有关更多详细信息，请参阅 jQuery DataTables： ROWSPAN in Table Body 一文。

COLSPAN 和 ROWSPAN

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

有关代码和演示，请参阅此示例。

有关更多详细信息，请参阅 jQuery DataTables： COLSPAN in Table Body TBODY - COLSPAN 和 ROWSPAN 文章。

如果您使用的是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的答案

请参阅下面的链接。

fnFakeRowspan

另请参阅此处的插件。

fnFakeRowspan 插件

希望这对你有帮助

我不知道在

什么时候，但我想fnFakeRowspan不支持当前的DataTable版本。

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

发现它很容易实现并且运行良好。搜索效果很好，排序则不然。

在此处查看实现。

因为数据表不支持colspan，我通常最终使用无序列表(ul(和list-style: none;

这是结果

相关文章：