我一直在尝试动态地将rowspan添加到数据表中 . 动态样式仅适用于第一页,当我查看其他页面时,样式不适用 .
这是我的代码 .
$(document).ready(function () {
repTable = $('#ar_age_zone-report').DataTable({
"pageLength": 12,
columns: [
{ data: "1" },
{ data: "1A" },
{ data: "2" },
{ data: "3" },
{ data: "4" },
{ data: "5" },
{ data: "6" },
{ data: "7" },
{ data: "8" },
{ data: "9" },
{ data: "10" }
],
destroy: true,
sort: false,
});
//$("#ar_age_summary-report_filter").css("text-align", "left");
});
for (var i = 0; i <= data.length - 1; i++) {
if (i != 0) {
if (data2.ZONE != data[i - 1].FIELDS.ZONE) {
zoneObject.push({
zone: data[i - 1].FIELDS.ZONE,
zoneCounter: zoneCtr,
zoneClass: data[i - 1].FIELDS.MASTER_ID,
zoneGroup: data[i - 1].FIELDS.GROUPER
});
}}
repTable.rows.add([{
"1": "<span class='group_status' data-group='" + data2.GROUPER + "' data-class='" + data2.MASTER_ID + "' data-zone='" + data2.ZONE + "' >" + meterStatus + "<span>",
"1A": "<span class='group_name' data-group='" + data2.GROUPER + "' data-class='" + data2.MASTER_ID + "' data-zone='" + data2.ZONE + "' >" + data2.NAME + "<span>",
"2": "<span class='group_zone' data-group='" + data2.GROUPER + "' data-class='" + data2.MASTER_ID + "' data-zone='" + data2.ZONE + "' >" + data2.ZONE + "<span>",
"3": data2.RACK,
"4": IMC(cons),
"5": NMC(d_1),
"6": NMC(d_2),
"7": NMC(d_3),
"8": NMC(d_4),
"9": NMC(d_5),
"10": NMC(total),
}]).draw(false);
}
这是我调用格式化表格的函数
function formatTable(zoneObject) {
for (var i = 0; i < zoneObject.length - 1; i++) {
var test = $(".group_status[data-group='" + zoneObject[i].zoneGroup + "'][data-class='" + zoneObject[i].zoneClass + "'][data-zone='" + zoneObject[i].zone + "']:first").closest('td').html();
console.log(test);
$(".group_status[data-group='" + zoneObject[i].zoneGroup + "'][data-class='" + zoneObject[i].zoneClass + "'][data-zone='" + zoneObject[i].zone + "']:first").closest('td').attr("rowspan", zoneObject[i].zoneCounter);
$(".group_name[data-group='" + zoneObject[i].zoneGroup + "'][data-class='" + zoneObject[i].zoneClass + "'][data-zone='" + zoneObject[i].zone + "']:first").closest('td').attr("rowspan", zoneObject[i].zoneCounter);
$(".group_zone[data-group='" + zoneObject[i].zoneGroup + "'][data-class='" + zoneObject[i].zoneClass + "'][data-zone='" + zoneObject[i].zone + "'] :first").closest('td').attr("rowspan", zoneObject[i].zoneCounter);
$(".group_status[data-group='" + zoneObject[i].zoneGroup + "'][data-class='" + zoneObject[i].zoneClass + "'][data-zone='" + zoneObject[i].zone + "']:not(:first)").closest('td').css("display", "none");
$(".group_name[data-group='" + zoneObject[i].zoneGroup + "'][data-class='" + zoneObject[i].zoneClass + "'][data-zone='" + zoneObject[i].zone + "']:not(:first)").closest('td').css("display", "none");
$(".group_zone[data-group='" + zoneObject[i].zoneGroup + "'][data-class='" + zoneObject[i].zoneClass + "'][data-zone='" + zoneObject[i].zone + "']:not(:first)").closest('td').css("display", "none");
}
}
此外,当我尝试在每个其他页面中控制第一个TD(测试变量)时 . 只有第一个返回一个值,其余的返回undefined .
我也尝试调用函数来格式化表格,但分页上的点击事件不起作用 .