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

无论何时使用

，我都会遇到以下错误：

未捕获的TypeError:无法设置未定义（…）的属性“\u DT\u CellIndex”

演示

$（“表”）.DataTable（{}）

1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.
1.
3 4
4 5 6
请参阅下面的链接


也请参考这里的插件


希望这将帮助您
您可以通过为每个被消除的单元添加一个“不可见”单元来解决缺少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上尝试过这种方法。
我不知道在什么时候，但是我想fnFakeRowspan不支持当前的DataTable版本

另一种选择是签出插件

发现它很容易实现，而且运行良好。
搜索可以很好地工作，而排序却不行

检查实现。
COLSPAN:Ajax或JavaScript源数据
提供的优秀解决方案仅适用于HTML源数据

同样的想法也可以用于Ajax源数据

当在表体中创建
TR
元素时，需要使用选项修改所需的单元格

例如：

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

有关代码和演示，请参阅

有关更多详细信息，请参阅文章

行距
可以使用插件模拟
行span
属性

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

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

有关代码和演示，请参阅

有关更多详细信息，请参阅文章

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

有关代码和演示，请参阅

请参阅文章了解更多详细信息。
因为datatables不支持
colspan
，所以我通常使用无序列表（
ul
）和
列表样式：无

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


H列
H列
宽栏
123
正常列
正常列

“Dirk#u Bergstrom
简单解的修改答案在这里

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


细节

没有其他解决办法
请注意，如果启用了
scrollX
，单元格就会与此解决方案不对齐：使用
rowspan
尝试此方法也可以，但排序可能会破坏布局。@Protocole在排序方面面临同样的问题。。有什么办法吗？对不起，@BharatGeleda，我只是不需要它，把它禁用了。非常好，谢谢你，先生！我在使用bootstrap时添加了一个，现在可以正常工作了。现在，datatables不支持在表体中添加rowspan或colspan。但是，可能的解决方案应该是希望它能工作。我已经给出了代码，请检查下面的url