从每个记录的datatables行获取属性值

我正在使用，我想编辑和删除数据表记录

当我执行

console.log（行）

时，我得到以下输出：

[“用户1”，“编辑”] （索引）：274（2）[“用户2”，“编辑”] （索引）：274（2）[“用户3”，“编辑”] （索引）：274（2）[“用户4”，“编辑”] （索引）：274（2）[“用户5”，“编辑”]

我想要的是从我在datatable脚本中使用的

呈现：函数（数据、类型、行）

中获取

数据id

，当单击编辑按钮时，我想要在警报中获取特定的

id

，但我无法提取

数据id

我的jQuery代码：

$.fn.dataTable.ext.errMode = 'none';
var table = $('#catgeory_list').DataTable({
        processing: true,
        language: {
            emptyTable: 'no result found.'
        },
        columnDefs: [{
                visible: true,
                targets: 0,
                render: function (data, type, full, meta) {
                    return data;
                }
            }, {
                visible: true,
                targets: 1,
                render: function (data, type, row) {
                    console.log(row);
                    return '<button id="editBtn" class="btn btn-wrang btn-flat edit" name="editBtn" type="button">Edit</button>' + '&nbsp;&nbsp;<button id="deleteBtn" class="btn btn-danger btn-flat delete" name="deleteBtn" type="button" >Delete</button>';
                }
            }
        ],
    });

$.fn.dataTable.ext.errMode='none'；
变量表=$（'catgeory_list'）。数据表({
处理：对，
语言：{
emptyTable:'未找到结果。'
},
columnDefs：[{
可见：对，
目标：0，
呈现：函数（数据、类型、完整、元）{
返回数据；
}
}, {
可见：对，
目标：1，
呈现：函数（数据、类型、行）{
控制台日志（行）；
返回“编辑”+“删除”；
}
}
],
});

您可以使用jQuery包装回调函数中的数据或行参数，以获取任何元素/节点属性或DOM管理。另请参阅以了解如何处理Datatables API实例

渲染

render: function(data, type, row, meta){
                    var data_id = $(data).data('id');
                    console.log('Columns.Render:',data_id);
                    return data + " : data-id(" + data_id+")";
            }

createdRow

createdRow: function (row, data, index) {
                    var data_id = $('td a.edit_row', row).data('id');
                    console.log('CreatedRow:',data_id);
        }

单击事件

$("a.edit_row").click(function(){
        var data_id = $(this).data('id');
        alert(data_id);
      });

工作现场演示：

$（文档）.ready（函数（）{
变量表=$（'#示例'）。数据表({
columnDefs：[
{
目标：1，
呈现：函数（数据、类型、行、元）{
var data_id=$（data）.data（'id'）；
console.log（'Columns.Render:'，data_id）；
返回数据+”：数据id（“+data\u id+”）；
}
},
],
createdRow：函数（行、数据、索引）{
var data_id=$（'td a.edit_row'，row.）.data（'id'）；
console.log（'CreatedRow:'，数据id）；
}
});
$（“a.edit_行”）。单击（函数（）{
var data_id=$（this.data（'id'）；
警报（数据标识）；
});
} );

名称
位置
办公室
年龄
开始日期
薪水
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
爱丁堡
61
2011/04/25
$3,120
加勒特温特斯
爱丁堡
63
2011/07/25
$5,300
阿什顿考克斯
旧金山
66
2009/01/12
$4,800
为了获取所单击行的任何源对象/数组属性/项，您只需要针对DataTable行调用简单的API方法（由最靠近单击按钮的
节点选择）：

这里，
dataTable
是一个变量，您可以将dataTable分配给它

完整的演示您可以在下面找到

另外，考虑到您的最终目标，您可能会发现使用我的答案是非常有用的，它提供了可编辑数据表的完整工作演示。因此，如果您觉得这很有帮助，我们非常感谢您的支持；）


//src数据
常数srcData=[
{id:1，项：'apple'}，
{id:2，项：'banana'}，
{id:3，项目：'tomato'}
];
//数据表初始化
常量dataTable=$（'table'）。dataTable({
dom：‘t’，
数据：srcData，
列：[{data:'item'，title:'item Name'，render:data=>data+'Show Id'}]
});
//单击处理程序
$（'table'）。在（'click'，'tbody td button'，function（）上{
const rowData=dataTable.row（$（this.closest（'tr'））.data（）；
警报（`Row ID为${rowData.ID}`）；
});
td按钮{float:right}
关于您的代码，只有一些建议：
呈现
选项似乎对您的第一列没有任何作用，因此可能会被跳过；使用
对按钮周围的填充进行格式化似乎不是一个好的做法，您可以为此目的使用CSS（例如，就像我在下面所做的那样），这是可行的，但如果信息可以从数据表中提取出来，您将在数据表的顶部添加额外的不必要的层，请参阅Yevgen Gorbunkov“使用DatTables执行此操作的答案如果：“未捕获引用错误：未定义dataTable”？则为分配“dataTable（）”压缩输出的变量指定了不同的名称（如果有）。
$('table').on('click', 'tbody td button', function(){
  const rowData = dataTable.row($(this).closest('tr')).data();
  alert(`Row ID is ${rowData.id}`);
});