如何为jQuery DataTable的表格行添加data-*自定义属性？

嘿，我明白你已经知道用rowId选项给行设置ID了，但要添加data-spaceid和data-enrollmentid这类自定义属性，就得用到DataTables的**createdRow回调函数**啦！这个函数会在每一行被创建并插入到DOM后触发，刚好适合我们给行元素添加额外属性。

具体实现步骤： #

• 配置DataTables时，除了rowId，再加上createdRow回调
• 在回调里，通过行元素（tr）和当前行的数据对象，来设置对应的data-*属性

示例代码： #

$('#myTable').DataTable({
  ajax: '/api/staff',
  rowId: 'staffId', // 这部分你已经熟悉了，用来设置行的id
  createdRow: function(row, data, dataIndex) {
    // 用jQuery给行添加data属性
    $(row)
      .attr('data-spaceid', data.spaceId)
      .attr('data-enrollmentid', data.enrollmentId);
    
    // 如果你习惯原生JS，也可以这么写：
    // row.dataset.spaceid = data.spaceId;
    // row.dataset.enrollmentid = data.enrollmentId;
  }
});

最终生成的行结构： #

<tr data-spaceid="20146" data-enrollmentid="32" id="123"></tr>

这里的data参数就是当前行对应的数据源对象，所以你只需要确保从接口返回的数据里包含spaceId和enrollmentId这两个字段就行啦！

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