You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在jQuery DataTable中通过return获取每行的data.id?

解决DataTables获取行ID实现删除/修改功能的问题

你的核心问题是列渲染函数里错误引用了全局数据集,而非当前行的数据。下面直接给出修正方案和优化建议:

修正后的基础代码

$("#examplee").DataTable({
    "data": data,
    "columns": [
        {"data": 'numeroDossier'},
        {"data": 'nomOuRs'},
        {"data": 'tel'},
        {"data": 'province'},
        {
            data: null,
            render: function(data, type, row, meta) {
                // row参数是当前行的完整数据对象,直接通过row.id获取行ID
                return '<a><i class="btn fa-solid success fa-user-tag" onclick="get_assaj(\'' + row.id + '\')" title="selectionner assujetti"></i></a>' +
                       '<a><i class="btn fa fa-solid fa-user-pen" style="color: #B197FC" onclick="edit_assaj(' + JSON.stringify(row) + ')"></i></a>';
            }
        }
    ]
});

关键说明

  1. 正确获取行ID:render函数的第三个参数row对应当前行的完整数据,用row.id才能拿到当前行的ID,而你之前写的data.id是全局数据集的属性,并非当前行数据。
  2. 传递整行数据到编辑函数:如果edit_assaj需要整行数据,必须用JSON.stringify(row)把对象转成字符串,避免语法错误;后续在edit_assaj函数里可以用JSON.parse()解析回原对象。

更规范的优化方案(避免内联onclick)

建议用事件委托绑定点击事件,替代HTML内联的onclick,更符合前端开发规范:

// 初始化表格
$("#examplee").DataTable({
    "data": data,
    "columns": [
        {"data": 'numeroDossier'},
        {"data": 'nomOuRs'},
        {"data": 'tel'},
        {"data": 'province'},
        {
            data: null,
            render: function() {
                return '<a><i class="btn fa-solid success fa-user-tag" title="selectionner assujetti"></i></a>' +
                       '<a><i class="btn fa fa-solid fa-user-pen" style="color: #B197FC"></i></a>';
            }
        }
    ]
});

// 绑定选择按钮点击事件
$("#examplee").on('click', '.fa-user-tag', function() {
    var rowData = $("#examplee").DataTable().row($(this).closest('tr')).data();
    get_assaj(rowData.id);
});

// 绑定编辑按钮点击事件
$("#examplee").on('click', '.fa-user-pen', function() {
    var rowData = $("#examplee").DataTable().row($(this).closest('tr')).data();
    edit_assaj(rowData);
});

内容的提问来源于stack exchange,提问作者Hank Akim

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.27 21:57:52