javascript - JQuery 数据表 : Set colspan of column title dynamically

Question

不同于 example由文档提供，我想动态地制作列标题跨度。

我已经生成了样本数据

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 生成 header

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 的 colspan 为 2)？

Demo

Answer 1

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

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

Note that each column must have at least one unique cell (i.e. a cell without colspan) so DataTables can use that cell to detect the column and use it to apply ordering.

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

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 表格来模拟卡住行、列和标题的效果，因此列数据和列标题之间存在明显的脱节。