JQuery DataTable：动态设置列标题的colspan

Question

与文档提供的example 不同，我想让列标题动态跨度。

我已经生成了样本data

var data = [];

for (var i = 0; i < 4; ++i) {
    for (var j = 0; j < 4; ++j) {
        var dataRow = [];
        dataRow.push ("10" + (i + 1));
        dataRow.push ("A");
        for (var k = 0; k < 8; ++k) {
            dataRow.push ("B");
            dataRow.push ("test");
        }
        data.push (dataRow);
    }
}

尝试通过columnDefs生成标头

var columnDefs = [
    {
        title: "title",
        targets: [0, 1]
    }
];

for (i = 0; i < 8; ++i) {
    columnDefs.push ({
        title: "data" + i,
        targets: [(i + 1) * 2, (i + 1) * 2 + 1]
    });
}

并生成表格

$("#table").DataTable({
    columnDefs: columnDefs,
    data: data,
    rowsGroup: [
        0
    ],
    responsive: true,
    paging: false,
    searching: false,
    fixedHeader: true,
    fixedColumns: {
        leftColumns: 2
    },
    scrollX: true,
    scrollY: "200px",
    scrolLCollapse: true,
    info: false,
    ordering: false
});

但表在targets 字段分配的每一列上都有重复的标题。有什么办法可以合并它们（有效地使ths 有colspan 2 个）？

Demo

Answer 1

要使 DataTable colspan 正常工作，需要第二个标题行，每列都有一个标题单元格。

引用https://datatables.net/examples/advanced_init/complex_header.html:

请注意，每一列必须至少有一个唯一的单元格（即没有 colspan 的单元格），以便 DataTables 可以使用该单元格来检测列并使用它来应用排序。

但要回答您关于如何使用colspan 动态添加标题的问题，您可以执行以下操作：

var headers = '<thead><tr><th colspan="2">Title</th><th colspan="2">1</th><th colspan="2">2</th><th colspan="2">3</th><th colspan="2">4</th><th colspan="2">5</th><th colspan="2">6</th><th colspan="2">7</th><th colspan="2">8</th></tr>';
headers += '<tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead>';

$("#table").append(headers);

$("#table").DataTable({...});

更新的演示：https://jsfiddle.net/pn4aLmpb/1/

为了给它正确的外观，您可以将高度 0 应用到第二行。请注意，display:none 将不起作用，因为标题将不再与行数据对齐。这是因为DataTable在幕后巧妙地生成了几个重叠的HTML表格来模拟冻结行、列和标题的效果，因此列数据和列标题之间存在明显的脱节。