javascript–JQueryDataTable：动态设置列标题的colspan

与文档提供的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生成头

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
});


但表格由目标字段分配的每列上的重复标题.有什么方法可以合并它们(有效地使它们具有2的colspan)？

Demo

解决方法:

要使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标头的问题,您可以执行以下操作：

var headers = 'Title12345678';
headers += '';
$("#table").append(headers);
$("#table").DataTable({...});


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

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