首次加载数据后DataTables二次调用报错问题排查与解决

首次调用setModalRetta函数一切正常，但关闭模态框后点击其他数据会触发如下报错：

jquery.dataTables.min.js:4

Uncaught TypeError: Cannot read properties of undefined (reading 'style')) on loading datatables (tableretta = $('#tableretta').DataTable({....).

数据示例 #

示例1 #

{
    "DataArr": "2022-05-21T00:00:00",
    "DataPart": "2022-05-25T00:00:00",
    "Retta": 328,
    "NumPersone": 1,
    "Nome": "Formula Residence",
    "TipoCamera1": "DELUX",
    "NumCamera": "103",
    "NomeOspite": "KOSEL WALDEMAR ",
    "Giorni": [
        "2022-05-20",
        "2022-05-21",
        "2022-05-22",
        "2022-05-23",
        "2022-05-24"
    ]
}

示例2 #

{
    "DataArr": "2022-06-06T00:00:00",
    "DataPart": "2022-06-13T00:00:00",
    "Retta": 672,
    "NumPersone": 1,
    "Nome": "Formula Residence",
    "TipoCamera1": "DELUX",
    "NumCamera": "102",
    "NomeOspite": "RACCUGLIA AGATA ",
    "Giorni": [
        "2022-06-05",
        "2022-06-06",
        "2022-06-07",
        "2022-06-08",
        "2022-06-09",
        "2022-06-10",
        "2022-06-11",
        "2022-06-12"
    ]
}

相关代码 #

$('#mdlRetta').on('hidden.bs.modal', function () {
    if ($.fn.DataTable.isDataTable('#tableretta')) {
        $('#tableretta').DataTable().destroy();
        console.log('destroied on unload');
        tableretta = null;
    }    
});

function setModalRetta(objData) {
    console.log('Avvio Set Modal Retta');
    if ($.fn.DataTable.isDataTable('#tableretta')) {
        console.log('pre destroy');
        $('#tableretta').DataTable().destroy();
        console.log('Destroyed on load');
    }
    // 根据NumPersone复制生成新的JSON数组
    var duplicatedJson = [];
    objData.forEach(function (item, index) {
        var numPersone = item.NumPersone;
        var originalItem = Object.assign({}, item); // 复制原数据
        if (numPersone > 1) {
            originalItem.NumPersone = 1;
            duplicatedJson.push(originalItem); // 添加原数据
            for (var i = 0; i < numPersone - 1; i++) {
                var newItem = Object.assign({}, item);
                newItem.NumPersone = 1;
                newItem.NomeOspite = "Ospite " + (i + 1);
                duplicatedJson.push(newItem);
            }
        } else {
            duplicatedJson.push(item);
        }
    });
    console.log('Aggiunta ospiti fatta');
    // 为每个数据项添加Giorni数组
    for (var i = 0; i < duplicatedJson.length; i++) {
        var valore = duplicatedJson[i];
        var dtArr = parseDate(moment(valore.DataArr).format("YYYY-MM-DD"), "-");
        var dtPart = parseDate(moment(valore.DataPart).format("YYYY-MM-DD"), "-");
        valore.Giorni = calcolaGiorni(dtArr, dtPart);
    }


    var giorni = duplicatedJson[0].Giorni; // 所有数据的Giorni列表一致
    var dynamicColumns = []; // 动态列数组

    // 定义表格静态列
    var columns = [
        { data: 'NumCamera', title: 'Camera' },
        { data: 'NomeOspite', title: 'Ospite' },
        { data: 'Retta', title: 'Retta' },
        { data: 'NumPersone', title: 'Numero Persone' },
        { data: 'Nome', title: 'Nome' },
        { data: 'TipoCamera1', title: 'Tipo Camera' },
        { data: 'DataArr', title: 'DataArr' },
        { data: 'DataPart', title: 'DataPart' },
    ];
    // 添加日期列
    var naddedcols=0;
    giorni.forEach(function (giorno) {
        var giornoMese = new Date(giorno).toLocaleDateString('it-IT', { day: 'numeric', month: 'numeric' });
        naddedcols++;
        dynamicColumns.push({ data: giorno, title: giornoMese });
    });
    // 为总计列和动态计算预留列数
    naddedcols++;
    naddedcols++;
    // 添加总计列
    dynamicColumns.push({ data: "Totale", title: "Totale" });
    // 合并静态列与动态列
    var allColumns = columns.concat(dynamicColumns);

    console.table(duplicatedJson);
    console.table(allColumns);
    var previousValue = null;

    tableretta = $('#tableretta').DataTable({
        data: duplicatedJson,
        columns: allColumns,
        dom: 't',
        columnDefs: [
            {
                targets: '_all',
                defaultContent: '0' // 所有单元格默认值设为0
            },
            { target: 2, visible: false },
            { target: 3, visible: false },
            { target: 4, visible: false },
            { target: 5, visible: false },
            { target: 6, visible: false },
            { target: 7, visible: false },
        ],
        select: {
            style: 'os',
            items: 'cell'
        },
        scrollX: true,
        orderFixed: [[0, 'asc']],
        "rowCallback": function (row, data, index) {
            var colValue = data[0]; // 检查第一列数据

            if (colValue === previousValue) {
                $('td:eq(0)', row).empty(); // 重复值单元格置空
            } else {
                previousValue = colValue;
            }
        },
        "drawCallback": function () {
            var api = this.api();
            nb_cols = api.columns().nodes().length;
            
            api.rows().every(function (rowIdx, tableLoop, rowLoop) {
                var mySum = 0;                    
                var cells = "-" + naddedcols;
                $('td:gt('+cells+'):not(:last-child)', this.node()).each(function () {
                    mySum += parseFloat($(this).text(), 10);
                });
                $('td:last-child', this.node()).html(Math.round(mySum * 2) / 2);
            });
        }
    });

    $('#mdlRetta').modal('show');
}

尝试过的调整 #

曾尝试移除Giorni数组，调整objData结构如下：

{
    "DataArr": "2022-06-06T00:00:00",
    "DataPart": "2022-06-13T00:00:00",
    "Retta": 672,
    "NumPersone": 1,
    "Nome": "Formula Residence",
    "TipoCamera1": "DELUX",
    "NumCamera": "102",
    "NomeOspite": "RACCUGLIA AGATA ",
    "2022-06-05":"0",
    "2022-06-06":"0",
    "2022-06-07":"0",
    "2022-06-08":"0",
    "2022-06-09":"0",
    "2022-06-10":"0",
    "2022-06-11":"0",
    "2022-06-12":"0"
}

问题解决 #

在模态框卸载事件中添加$('#tableretta').html("");清空表格内容，问题得以解决：

$('#mdlRetta').on('hidden.bs.modal', function () {
    if ($.fn.DataTable.isDataTable('#tableretta')) {
        $('#tableretta').DataTable().destroy();
        $('#tableretta').html(""); // 新增该行清空表格
        console.log('destroied on unload');
        tableretta = null;
    }    
});

内容的提问来源于stack exchange，提问作者Francesco C.