将自定义数据属性插入 JQuery DataTables答案

【问题标题】：Inserting custom data attributes into JQuery DataTables将自定义数据属性插入 JQuery DataTables
【发布时间】：2014-11-07 21:41:50
【问题描述】：

问题：

我正在将 JQuery DataTables v1.10 用于与工作相关的项目。
该项目需要使用作为表值传入的解析 JSON 数据来定义和创建数据表
创建数据表后，每列中的每个单元格都应该有一个单击事件，该事件会打开一个弹出窗口并以 JSON 格式传入从端点接收的名称列表。端点会根据单击的表格单元格而变化。
我认为，在数据表实例化时，我需要在每个表格单元格元素上定义的 HTML5 数据属性中存储某种唯一信息。我希望声明一个自定义数据属性（例如：data-endpoint = "endpoint id"），但我不确定如果表行是通过 DataTables 动态生成的，是否可以这样做。

因为我不知道/不明白我的选择是什么，所以我想描述一下我最想做的事情：

实例化一个数据表并将解析的 JSON 数据传递给它。
在表格实例化时，为每个表格单元格元素设置自定义数据属性。
访问表格单元格单击事件，将存储在正确数据属性中的信息传递给它，以获取正确的端点。
创建一个显示从端点接收到的结果的 popin。

我不明白的部分是如何在表格单元格元素上创建自定义数据属性。这是可能的还是我需要考虑另一种方法。非常感谢任何帮助！

【问题讨论】：

标签： jquery jquery-datatables custom-data-attribute html5-data

【解决方案1】：

您可以尝试在实例化时使用createdRow 回调。示例：

$table.dataTable({

    "destroy": true, // To replace existing data
    "data": jsonData,
    "columns": columns,

    // Per-row function to iterate cells
    "createdRow": function (row, data, rowIndex) {
        // Per-cell function to do whatever needed with cells
        $.each($('td', row), function (colIndex) {
            // For example, adding data-* attributes to the cell
            $(this).attr('data-foo', "bar");
        });
    }
});

我认为这可以帮助你做你需要的。

【讨论】：

【解决方案2】：

我不得不做类似的事情。我不确定其余的，但我使用 columnDefs 选项来设置属性。

....
"destroy": true, // To replace existing data
"data": jsonData,
"columns": columns,
// Sets the attribute
"columnDefs": [{
    "targets":'_all',
    "createdCell": function(td){
        td.setAttribute('foo','bar');
    }
}]
...

它仍然使用 createdCell 选项，但它模仿了我在他们的文档 (https://datatables.net/reference/option/columns.createdCell) 中找到的内容。

【讨论】：