我一直在尝试动态地将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 .

我也尝试调用函数来格式化表格,但分页上的点击事件不起作用 .