Datatable报错：无法读取undefined的'row'属性，多Ajax更新表格失败

我来帮你排查这个问题，你遇到的报错主要是Ajax请求的异步特性导致的，另外代码里还有几个细节bug需要修正，咱们一步步来解决：

核心问题分析 #

三个Ajax请求是并行发起的，第二个和第三个更新数据的请求很可能在第一个初始化表格的请求完成前就执行了——这时候表格里还没有任何行数据，fnFindCellRowIndexes找不到对应ID的行，自然就会抛出“无法读取undefined的'row'属性”的错误。

具体修正方案 #

1. 控制Ajax请求的执行顺序 #

把后两个更新数据的请求放到第一个初始化请求的success回调里，确保表格已经填充数据后再执行更新操作。

2. 修正循环边界与变量作用域 #

• 第二个Ajax的循环条件i <= temp4.length会导致数组越界，改成i < temp4.length
• 循环变量i要使用let声明，避免全局作用域冲突

3. 修复fnFindCellRowIndexes的使用 #

这个方法返回的是匹配行索引的数组，因为ID是唯一的，我们取数组第一个元素即可，同时要判断是否找到行，避免传入undefined。

4. 修正变量名笔误 #

第三个Ajax里解析得到的是last_time，但后续代码误用了last_synctime_for_rentals，要统一变量名。

修正后的完整代码 #

alert("C");
$(document).ready(function($) {
    const table = $('#weeklysummary').DataTable();

    // 第一个Ajax：初始化表格
    $.ajax({
        url: "xyz.php",
        success: function(queryResult) {
            alert("B");
            const rowData = JSON.parse(queryResult);
            console.log(rowData);
            for (let i = 0; i < rowData.length; i++) {
                if (rowData[i].rental_status == "active") {
                    table.row.add([
                        rowData[i].id,
                        rowData[i].name,
                        rowData[i].day,
                        " ",
                        " ",
                        rowData[i].attendence,
                        " ",
                    ]).draw(false);
                }
            }

            // 表格初始化完成后，执行第二个Ajax更新数据
            $.ajax({
                url: "abc.php",
                success: function(online_time_received) {
                    alert("A");
                    const time2 = JSON.parse(online_time_received);
                    const temp4 = Object.keys(time2);
                    const temp3 = Object.values(time2);
                    console.log(temp4);
                    console.log(temp3);
                    for (let i = 0; i < temp4.length; i++) {
                        // 获取匹配ID的行索引数组
                        const rowIndexes = $('#weeklysummary').dataTable().fnFindCellRowIndexes(temp4[i], 0);
                        if (rowIndexes.length > 0) {
                            table
                                .cell(rowIndexes[0], 4)
                                .data(temp3[i])
                                .draw(false);
                        }
                    }
                }
            });

            // 表格初始化完成后，执行第三个Ajax更新数据
            $.ajax({
                url: "efg.php",
                success: function(value_received) {
                    //alert("D");
                    const last_time = JSON.parse(value_received);
                    const temp = Object.keys(last_time);
                    const temp2 = Object.values(last_time);
                    console.log(temp);
                    for (let i = 0; i < temp.length; i++) {
                        const rowIndexes = $('#weeklysummary').dataTable().fnFindCellRowIndexes(temp[i], 0);
                        if (rowIndexes.length > 0) {
                            table
                                .cell(rowIndexes[0], 3)
                                .data(temp2[i])
                                .draw(false);
                        }
                    }
                }
            });
        }
    });
});

额外建议 #

如果你的项目允许，推荐使用async/await来处理异步请求，代码会更易读、更易维护，比如：

$(document).ready(async function($) {
    const table = $('#weeklysummary').DataTable();

    try {
        // 初始化表格
        const initResponse = await $.ajax("xyz.php");
        const rowData = JSON.parse(initResponse);
        // ...填充表格逻辑...

        // 更新在线时间
        const timeResponse = await $.ajax("abc.php");
        // ...更新逻辑...

        // 更新同步时间
        const syncResponse = await $.ajax("efg.php");
        // ...更新逻辑...
    } catch (error) {
        console.error("请求出错：", error);
    }
});

内容的提问来源于stack exchange，提问作者Dipankar Dutta