[英]JQuery DataTable: Set colspan of column title dynamically
Unlike in the example provided by documentation, I want to make column title span dynamically. 与文档提供的示例不同,我想动态地创建列标题范围。
I have generated sample data
我已经生成了样本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);
}
}
tried to generate header via columnDefs
试图通过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]
});
}
and generated table 并生成表格
$("#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
});
but table duplicated title on each column assigned by targets
field. 但表格由targets
字段分配的每列上的重复标题。 Is there any way I can merge them (effectively making th
s have colspan
of 2)? 有什么方法可以合并它们(有效地colspan
有2 th
colspan
)?
To make the DataTable colspan
work requires a second header row, one that has a single header cell for each column. 要使DataTable colspan
工作,需要第二个标题行,每个标题行包含一个标题单元格。
Quote from https://datatables.net/examples/advanced_init/complex_header.html : 引自https://datatables.net/examples/advanced_init/complex_header.html :
Note that each column must have at least one unique cell (ie a cell without colspan) so DataTables can use that cell to detect the column and use it to apply ordering. 请注意,每列必须至少有一个唯一的单元格(即没有colspan的单元格),因此DataTables可以使用该单元格来检测列并使用它来应用排序。
But to answer your question on how to add headers with colspan
dynamically, you can do the following: 但要回答有关如何动态添加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({...});
Updated demo: https://jsfiddle.net/pn4aLmpb/1/ 更新的演示: https : //jsfiddle.net/pn4aLmpb/1/
To give it the correct appearance you may be able to apply a height of 0 to this second row. 为了给它正确的外观,你可以将0的高度应用到第二行。 Note that display:none
won't work as the headers will no longer align with the row data. 请注意, display:none
将不起作用,因为标题将不再与行数据对齐。 This is because behind the scenes DataTable cleverly generates several overlapping HTML tables to simulate the effects of frozen rows, columns and headings, so there is a distinct disconnect between the column data and the column headings. 这是因为在幕后,DataTable巧妙地生成了几个重叠的HTML表来模拟冻结的行,列和标题的效果,因此列数据和列标题之间存在明显的脱节。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.