Datatables不支持rowspan，如何将复杂表格转换为Datatable？

云上老周

2026-8-14

处理DataTables不支持rowspan的复杂表格方案

1. 用行分组替代合并单元格

DataTables自带的rowGroup插件能完美模拟rowspan的视觉效果，还不影响筛选、排序这些核心功能。思路是把原本要合并的单元格内容作为分组依据，让DataTables自动把同组的行归到一起，顶部显示分组标题，效果和合并单元格差不多。

示例代码：

$(document).ready(function() {
    $('#your-table').DataTable( {
        rowGroup: {
            dataSrc: 'group-field' // 对应你数据源里的分组字段名
        }
    } );
} );

2. 手动DOM操作模拟rowspan

如果一定要用原生的rowspan属性，那就初始化DataTables之后自己写逻辑处理：遍历表格行，对比单元格内容，相同的就合并，隐藏重复的单元格，同时更新上一个单元格的rowspan值。

示例代码：

$(document).ready(function() {
    const table = $('#your-table').DataTable();
    // 以第一列为例处理合并
    let lastVal = '';
    let mergeCount = 1;

    table.rows().every(function(rowIdx) {
        const currentVal = this.cell(rowIdx, 0).data();
        if (currentVal === lastVal) {
            mergeCount++;
            // 隐藏当前重复单元格
            this.cell(rowIdx, 0).node().style.display = 'none';
            // 更新上一个单元格的rowspan
            table.cell(rowIdx - 1, 0).node().setAttribute('rowspan', mergeCount);
        } else {
            lastVal = currentVal;
            mergeCount = 1;
        }
    });

    // 注意：筛选、排序后表格会重绘，得重新执行合并逻辑
    table.on('draw', function() {
        // 把上面的合并逻辑复制过来，或者封装成函数调用
    });
});