jQuery Datatables在Ajax回调中获取同行单元格值设置行按钮属性

你原代码的问题在于defaultContent是静态配置项，外层定义的firstName变量只会在初始化DataTable时计算一次，无法关联每行的动态数据，直接用DataTable提供的columns.render渲染回调即可实现需求，该回调可以拿到当前行的全量数据，直接取值注入按钮属性即可。

修改后的核心代码如下：

function successFunc(data) {
    $("#tblMyTable").DataTable({
        "info": true,
        "data": data.list,
        "responsive": true,
        "autoWidth": false,
        "bAutoWidth": false,
        "retrieve": true,
        columns: [
            { 'data': "ID" }, 
            { 'data': "First_Name" },
            { 'data': "Last_Name" },
            {
                'data': 'Edit',
                // 用render回调生成动态内容，row参数就是当前行的完整数据对象
                "render": function (data, type, row) {
                    return `<button type="button" data-name="${row.First_Name}" href="javascript:;">Edit</button>`
                }
            }
        ]
    });
}

如果后续需要获取按钮绑定的值，直接用jQuery的data()方法取值即可，示例点击事件写法：

$('#tblMyTable').on('click', 'button[data-name]', function () {
    const currentName = $(this).data('name');
    // 后续逻辑直接用currentName即可
})

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