如何使用JavaScript将DataTable的行数据作为函数参数传递？

问题根源 #

你之前的代码里，生成按钮时直接在onClick中拼接this.dataTable，会把JavaScript对象强制转换成字符串[object Object]，导致调用actvDetails时传入的不是有效行数据，自然无法正常获取到目标内容。

方案一：使用DataTable事件委托（推荐） #

DataTable原生支持事件委托监听行内元素点击，这种方式更可靠，还能避免分页、排序后事件丢失的问题：

function populateDataTable(data) {
    console.log("populating data table...");

    // 清空并销毁旧表格，避免重复初始化
    const table = $("#tabela1").DataTable();
    table.clear().destroy();

    // 重新初始化表格并配置列渲染
    $("#tabela1").DataTable({
        data: data,
        columns: [
            { data: "id" },
            { data: "number" },
            { data: "limit" },
            { 
                data: "status",
                render: function(status) {
                    return '<td class="align-middle situation" style="display: table-cell;" tabindex="0"><span class="badge badge-primary">'+status+'</span></td>';
                }
            },
            { data: "last_updated" },
            { 
                data: null,
                render: function() {
                    return '<td class="align-middle moreOptions" style="display: table-cell;"><span tooltip="details" title=""><a class="fa fa-eye grey-text" data-placement="top" data-toggle="modal" href="#" data-backdrop="false"></a></span></td>';
                }
            }
        ]
    });

    // 监听详情按钮点击事件
    $("#tabela1").on("click", ".fa-eye", function() {
        // 获取当前行的完整数据
        const rowData = $("#tabela1").DataTable().row($(this).closest("tr")).data();
        actvDetails(rowData);
    });
}

function actvDetails(dataTable) {
    console.log(dataTable);
    // 在此处处理行数据
}

方案二：改进onClick参数传递逻辑 #

如果坚持用循环生成HTML的方式，需要将对象序列化为转义后的JSON字符串，在函数中直接使用：

function populateDataTable(data) {
    console.log("populating data table...");

    const table = $("#tabela1").DataTable();
    table.clear();
    const length = Object.keys(data).length;
    console.log("Object length is " + length);

    for(let i = 0; i < length; i++) {
        const dataTable = data[i];

        const actStatus = '<td class="align-middle situation" style="display: table-cell;" tabindex="0"><span class="badge badge-primary">'+dataTable.status+'</span></td>';
        // 将对象转为JSON字符串并转义引号，避免HTML语法冲突
        const escapedData = JSON.stringify(dataTable).replace(/"/g, '&quot;');
        const viewBtn = '<td class="align-middle moreOptions" style="display: table-cell;"><span tooltip="details" title=""><a class="fa fa-eye grey-text" data-placement="top" data-toggle="modal" href="#" onClick="actvDetails('+escapedData+')" data-backdrop="false"></a></span></td></tr>';

        table.fnAddData([
            dataTable.id, 
            dataTable.number, 
            dataTable.limit,
            actStatus,
            dataTable.last_updated,
            viewBtn,
        ]);
    }
}

function actvDetails(dataTable) {
    console.log(dataTable);
    // 处理行数据
}

关键提示 #

• 方案一采用DataTable官方推荐的事件委托模式，适配表格的动态渲染场景（如分页、排序），稳定性更高。
• 方案二需要注意JSON字符串的引号转义，否则会破坏HTML结构，导致事件绑定失效。

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