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字段分配的每列上的表格重复标题。有什么方法可以合并它们（有效地使th有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表来模拟冻结的行，列和标题的效果，因此列数据和列标题之间存在明显的脱节。

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

1 个答案: