jQuery DataTable点击事件中获取行参数值undefined问题

• 行数据取值方式错误：你当前接口返回的单行数据是对象结构，不是数组结构，用data[14]、data[12]这种数组下标方式访问属性，自然全部返回undefined。
• 行实例获取方式不可靠：通过手动解析按钮id再传数字给row()方法的写法容错性差，而且你按钮id的属性引号写反了，存在解析失败风险。
• 参数和返回字段不匹配：你拼接URL时用的下标11/12/13/14，和实际返回的HasPayment/Year/Month/AppNumber/Id等对象属性完全没有对应关系。

1. 列渲染配置修正 #

修正按钮id的引号错位问题，规范id命名：

{
    data: "HasPayment",
    render: function (data, type, row, meta) {
        if (data) {
            return `<button class="hasPayment btn btn-link" id="row-${meta.row}">
                <span class="fas fa-check" style="color: green"></span>
            </button>`;
        }
        return `<button class="hasPayment btn btn-link" id="row-${meta.row}">
            <span class="fas fa-times" style="color: red"></span>
        </button>`;
    }
}

2. 点击事件逻辑修正 #

直接通过点击元素关联的DOM行获取数据，用对象属性名取值，避免下标访问错误：

$('#HR_Payment_DataTable tbody').on('click', '.hasPayment', function () {
    const dataTable = $('#HR_Payment_DataTable').DataTable();
    // 直接通过按钮最近的tr元素获取对应行数据，无需解析id
    const rowData = dataTable.row($(this).closest('tr')).data();

    // 按返回的对象属性拼接参数，注意根据接口实际要求调整applicationId对应的字段
    // 如果接口需要Guid类型的主键，把rowData.AppNumber替换为rowData.Id即可
    const url = `Payment/Set?applicationId=${rowData.AppNumber}&year=${rowData.Year}&month=${rowData.Month}&hasPayment=${!rowData.HasPayment}`;

    $.ajax({
        url: url,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function () {
            dataTable.ajax.reload();
        },
        error: () => {
            console.error("请求失败，请检查接口配置");
        }
    });
});

补充说明：原逻辑中hasPayment取的是行内存储的旧值，点击切换状态时需要取反，所以代码中写为!rowData.HasPayment，如果你的业务逻辑不需要切换状态，直接改回rowData.HasPayment即可。

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