如何在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>'; } } ] });
关键说明
- 正确获取行ID:render函数的第三个参数
row对应当前行的完整数据,用row.id才能拿到当前行的ID,而你之前写的data.id是全局数据集的属性,并非当前行数据。 - 传递整行数据到编辑函数:如果
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
相关产品推荐
相关产品推荐

