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

Question

与文档提供的示例不同，我希望使列标题动态跨度。

我已生成示例数据。

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”字段分配的表格标题重复了。有没有办法将它们合并（有效地使具有colspan = 2）？ 演示

- Kudayar Pirimbaev

---

我尝试使用jQuery，但它表现得很奇怪。我正在使用这个：$("#table thead th:first-child").attr('colspan',2); - Ryan

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表格，以模拟冻结行、列和标题的效果，因此列数据和列标题之间存在明显的断开。

- K Scandrett

---

我要补充的是DataTables的作者已经声明，没有API可以跨列(在表头中)，而应该通过Javascript来实现。 - K Scandrett