在Datatables与altEditor中添加新行后出现错误

我正在给基于Struts 1.3、EJB 2.0构建的老旧应用添加页面，用Datatables和altEditor实现行的动态增、删、改、刷新功能，参考了altEditor的AJAX对象示例。点击添加按钮录入信息后，AJAX请求能成功保存记录到数据库，刷新页面也能看到新数据，但会弹出JS错误，无法定位原因。

错误截图 #

前端代码 #

$(document).ready(function() {        
    var context = "<%=request.getContextPath()%>";
    
    var columnDefs = [
        {
            data: "payMonth",
            title: "Month",
            type: "number"
        },
        {
            data: "payYear",
            title: "Year",
            type: "number"
        },
        {
            data: "payPercentage",
            title: "Percentage",
            type: "number"
        }
    ];
    let someId = new URLSearchParams(window.location.search);
    
    $.ajaxSetup({
        beforeSend: function() {$('#loader').show();},
        complete: function() { $('#loader').hide();},
        success: function() {},
        async: true
    });
    var url1 = context + '/myAction.do?action=myGetMethods&someId='+someId;
    var url2 = context+'/myAction.do?action=mySaveMethod&someId='+someId; 
    
    var myTable;
    myTable = $('#myDataTable').DataTable({
        "sPaginationType": "full_numbers",
        ajax: {
            url : url1,
            dataSrc : 'data'
        },
        columns: columnDefs,
        dom: 'Bfrtip',        // Needs button container
        select: 'single',
        responsive: true,
        altEditor: true,     // Enable altEditor
        buttons: [
            {
                text: 'Add',
                name: 'add'        // do not change name
            },
            {
                extend: 'selected', // Bind to Selected row
                text: 'Edit',
                name: 'edit'        // do not change name
            },
            {
                extend: 'selected', // Bind to Selected row
                text: 'Delete',
                name: 'delete'      // do not change name
            },
            {
                text: 'Refresh',
                name: 'refresh'      // do not change name
            }
        ],
        onAddRow: function(datatable, rowdata, success, error) {
            var urlSave = context+'/myAction.do?action=mySaveMethod&someId='+someId;
            $.ajax({
                url: urlSave,
                type: 'GET',
                data: rowdata,
                success: success,
                error: error
            });
        },
        onDeleteRow: function(datatable, rowdata, success, error) {
            $.ajax({
                url: url1,
                type: 'GET',
                data: rowdata,
                success: success,
                error: error
            });
        },
        onEditRow: function(datatable, rowdata, success, error) {
            $.ajax({
                url: url1,
                type: 'GET',
                data: rowdata,
                success: success,
                error: error
            });
        }
    });
});

问题分析与解决方案 #

1. 核心错误原因 #

从截图看，错误是Cannot read properties of undefined (reading 'DT_RowId')，原因在于：

• altEditor添加行后需要获取新增行的唯一标识（默认是DT_RowId）来更新表格，但当前直接把AJAX的success回调传给altEditor，而后台保存接口可能只返回成功状态，未返回包含DT_RowId的完整行数据；
• someId的获取方式错误，导致URL拼接出无效参数，可能干扰接口返回格式。

2. 具体修复步骤 #

（1）修正someId参数获取

当前代码获取的是URLSearchParams对象而非具体参数值，拼接URL会生成无效参数，改为：

let someId = new URLSearchParams(window.location.search).get('someId');

（2）调整onAddRow的AJAX回调

确保altEditor能拿到符合要求的行数据：

• 若后台可修改：让保存接口返回新增的完整行数据（包含payMonth、payYear、payPercentage，最好加上DT_RowId），修改回调：

onAddRow: function(datatable, rowdata, success, error) {
    var urlSave = context+'/myAction.do?action=mySaveMethod&someId='+someId;
    $.ajax({
        url: urlSave,
        type: 'GET',
        data: rowdata,
        success: function(response) {
            // 假设后台返回的行数据在response.data中
            success(response.data);
        },
        error: error
    });
}

• 若后台无法修改：手动构造符合要求的行数据传给success函数：

onAddRow: function(datatable, rowdata, success, error) {
    var urlSave = context+'/myAction.do?action=mySaveMethod&someId='+someId;
    $.ajax({
        url: urlSave,
        type: 'GET',
        data: rowdata,
        success: function() {
            // 手动构造行数据并添加临时唯一ID
            success({
                ...rowdata,
                DT_RowId: 'row_' + Date.now()
            });
        },
        error: error
    });
}

（3）修正编辑、删除接口的URL

当前onEditRow和onDeleteRow误用了查询接口url1，替换为对应的修改、删除接口：

onDeleteRow: function(datatable, rowdata, success, error) {
    $.ajax({
        url: context+'/myAction.do?action=myDeleteMethod&someId='+someId,
        type: 'GET',
        data: rowdata,
        success: success,
        error: error
    });
},
onEditRow: function(datatable, rowdata, success, error) {
    $.ajax({
        url: context+'/myAction.do?action=myEditMethod&someId='+someId,
        type: 'GET',
        data: rowdata,
        success: success,
        error: error
    });
}

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