15

问题：

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

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

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

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

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

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

4

2 回答 2

19

您可以尝试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");
        });
    }
});

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

于 2014-10-06T06:56:33.040 回答
4

我不得不做类似的事情。我不确定其余的，但我使用 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）中找到的内容。

于 2016-10-18T20:11:13.020 回答