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

与文档提供的示例不同,我想动态地创建列标题范围.

我已经生成了样本 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字段分配的每列上的重复标题.有什么方法可以合并它们(实际上th有colspan2个)吗？

演示