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

Posted 2023-05-07

【中文标题】将自定义数据属性插入 JQuery DataTables

【英文标题】：Inserting custom data attributes into JQuery DataTables

【发布时间】：2014-11-07 21:41:50

【问题描述】：

问题：

我正在将 JQuery DataTables v1.10 用于与工作相关的项目。 该项目需要使用作为表值传入的解析 JSON 数据来定义和创建数据表

创建数据表后，每列中的每个单元格都应该有一个单击事件，该事件会打开一个弹出窗口并以 JSON 格式传入从端点接收的名称列表。端点会根据单击的表格单元格而变化。

我认为，在数据表实例化时，我需要在每个表格单元格元素上定义的 html5 数据属性中存储某种唯一信息。我希望声明一个自定义数据属性（例如：data-endpoint = "endpoint id"），但我不确定如果表行是通过 DataTables 动态生成的，是否可以这样做。

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

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

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

【参考方案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) 中找到的内容。