JavaScript DataTable行内值引用问题：点击按钮如何传递行参数？

核心问题：render函数参数顺序错误 #

你当前的render函数参数顺序写错了，DataTables的render函数标准参数顺序是function(data, type, row, meta)，第三个参数才是整行的数据源对象。你把第二个参数当成了行数据，自然拿不到row.errorType这类值。

修正后的基础写法 #

调整参数顺序，同时注意字符串类型的参数要加引号（避免语法错误）：

columns: [
    {
        "data": "errorType",
        "render": function (data) {
            return data;
        }
    },
    {
        "data": "errorDescription",
        "render": function (data) {
            return data;
        }
    },
    {
        "data": "entityId",
        // 修正参数顺序：data, type, row
        "render": function (data, type, row) {
            // 字符串参数用单引号包裹，防止语法报错
            return `<button class="newError" onclick="openModal('${row.errorType}', '${row.errorDescription}', ${data})"><i class="icon ticket errorTableIcon"></i></button>`;
        }
    }
],

更优方案：事件委托（推荐） #

内联onclick容易遇到字符串转义问题，推荐用事件委托绑定点击事件，更安全易维护：

1. 先去掉内联事件，用data属性存储整行数据：

{
    "data": "entityId",
    "render": function (data, type, row) {
        // 把整行数据转成JSON字符串存在data属性里
        return `<button class="newError" data-row='${JSON.stringify(row)}'><i class="icon ticket errorTableIcon"></i></button>`;
    }
}

2. 表格初始化完成后绑定事件：

// 假设你的表格id是errorTable
$('#errorTable').on('click', '.newError', function() {
    // 解析存储的行数据
    const row = JSON.parse($(this).data('row'));
    // 调用目标函数
    openModal(row.errorType, row.errorDescription, row.entityId);
});

额外注意 #

• 如果errorType或errorDescription包含单引号，第一种拼接字符串的方式会出错，事件委托的方案能自动处理转义，更稳妥。
• 确认你的数据源里确实存在errorType、errorDescription这些字段，避免因拼写错误导致undefined。

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