在jQuery数据表中插入定制数据属性

ltqd579y  于 2023-03-17  发布在  jQuery
关注(0)|答案(2)|浏览(158)

问题:

  • 我正在为一个与工作相关的项目使用JQuery DataTables v1.10。
  • 该项目要求定义和创建一个Datatable,并将解析后的JSON数据作为表的值传入
  • 创建数据表后,每列中的每个单元格都应该有一个click事件,该事件打开一个弹出窗口,并传入从端点接收的JSON格式的名称列表。
  • 我认为,在数据表示例化时,我需要在每个表单元格元素上定义的HTML5数据属性中存储某种唯一信息。data-endpoint =“endpoint id”),但是如果表行是通过DataTables动态生成的,我不确定是否可以这样做。

由于我不知道/不理解我的选择是什么,我想描述一下我理想的做法:

  • 示例化一个datatable并将解析后的JSON数据传递给它。
  • 在表格示例化时,在每个表格单元格元素上设置一个定制的数据属性。
  • 访问表单元格的click事件,向其传递存储在正确的data-attribute中的信息,以便获得正确的端点。
  • 创建将显示从端点接收的结果的popin。

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

oknwwptz

oknwwptz1#

您可以尝试在示例化时使用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");
        });
    }
});

我想这能帮你做你需要的事。

6mzjoqzu

6mzjoqzu2#

我不得不做一些类似的事情。我不确定其他的事情,但是我使用了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)中找到的内容。

相关问题