如何在DataTables Editor中为单元格文本添加data属性？

问题描述 #

初始化DataTables及Editor时，我使用了如下列配置：

columns: [
  { data: "name", className: 'noEdit clickTextToOpenModal'  },
]

我可以在此处设置className，有以下几个疑问：

• 能否直接在该配置中添加data属性？希望实现类似如下的写法：

{ data: "name", className: 'noEdit transactionModalBtn', data-bs-toggle="modal" data-bs-target="#transactionModal"},

• 在哪里可以找到所有可用的列配置项（如data、className等）？是否存在专门用于设置data属性的配置项？
• 如果无法直接配置，添加data属性以打开模态框的最佳实践是什么？

更新尝试 #

我已尝试如下写法：

{ data: "name", className: 'noEdit transactionModalBtn', createdCell: function(td, cellData, rowData, row, col){$(td).data("data-bs-toggle", "modal"); $(td).data("data-bs-target", "#transactionModal");}},

解答 #

1. 能否直接在列配置中添加data属性？ #

不行。DataTables的列配置对象不支持直接将data-bs-toggle这类HTML data属性作为配置键，即便给键名加上引号（比如"data-bs-toggle": "modal"），DataTables也不会识别并将其渲染为单元格的HTML属性，这种写法还可能引发语法错误。

2. 列配置项查询与data属性专属配置 #

所有列配置项可在DataTables官方文档的列选项列表中查看。目前没有内置的专门用于批量设置HTML data属性的配置项，需通过回调函数实现。

3. 添加data属性的最佳实践 #

你尝试的createdCell回调思路是对的，但有个细节需要调整：$(td).data()是将数据存储在jQuery的内部缓存中，不会真正渲染到HTML的data-*属性上。如果你的模态框（比如Bootstrap模态框）依赖HTML上的data-bs-toggle和data-bs-target属性，应该改用attr()方法设置：

{ 
  data: "name", 
  className: 'noEdit transactionModalBtn', 
  createdCell: function(td, cellData, rowData, row, col){
    $(td).attr("data-bs-toggle", "modal"); 
    $(td).attr("data-bs-target", "#transactionModal");
  }
}

另外还有一种方案是使用render函数，直接生成带有目标属性的HTML元素：

{ 
  data: "name", 
  className: 'noEdit transactionModalBtn',
  render: function(data, type, row){
    // 仅在展示模式下返回带属性的HTML，排序/筛选时返回原始数据
    if(type === 'display'){
      return `<span data-bs-toggle="modal" data-bs-target="#transactionModal">${data}</span>`;
    }
    return data;
  }
}

两种方案的区别：

• createdCell：在单元格DOM创建完成后修改元素，适合给整个单元格添加属性；
• render：直接生成包含属性的内容，适合给单元格内的特定元素加属性，同时不影响数据的排序、筛选逻辑。

内容的提问来源于stack exchange，提问作者Björn C