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

Problem:

I am using JQuery DataTables v1.10 for a work-related project.

我正在使用JQuery DataTables v1.10来处理与工作相关的项目。

The project requires a Datatable to be defined and created with parsed JSON data passed in as the values of the table

该项目需要使用作为表的值传入的已解析JSON数据来定义和创建数据表

Once the datatable has been created, every cell in each column should have a click event that opens a pop in and pass in a list of names in JSON, received from an endpoint. The endpoint changes depending on which table cell is clicked.

创建数据表后,每列中的每个单元都应该有一个单击事件,该事件将打开一个弹出窗口,并传入一个从端点接收的JSON名称列表。端点根据单击的表格单元格而变化。
I think, upon datatable instantiation, I need to store some sort of unique information in an HTML5 data-attribute defined on each table cell element. I was hoping to declare a custom data-attribute (ex: data-endpoint = "endpoint id") but I'm not Sure if that is possible to do if the table rows are being dynamically generated via DataTables.

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

Because I don't know/understand what my options are, I'd like to describe what I ideally would like to do:

因为我不知道/不了解我的选择,所以我想描述一下我理想的做法:

Instantiate a datatable and pass it the parsed JSON data.

实例化数据表并将解析的JSON数据传递给它。

On table instantiation, set a custom data-attribute on each table cell element.

在表实例化时,在每个表单元格元素上设置自定义数据属性。

Access the table cell click event, pass it the information stored in the correct data-attribute, in order to get the correct endpoint.

访问表格单元格单击事件,将其传递给存储在正确数据属性中的信息,以获取正确的端点。

Create a popin that will display the results received from the endpoint.

创建一个popin,显示从端点收到的结果。

The part I don't understand is how to create a custom data-attribute on the table cell element. Is this possible or do I need to think of another approach. Any help is deeply appreciated!

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

2 个解决方案

#1

You can try with the createdRow callback on instantiation. Example:

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

I think this can help you to do what you need.

我认为这可以帮助您做您需要的事情。

#2

I had to do something kind of like that. I'm not sure about the rest, but I used the columnDefs option to set the attributes.

我必须做那样的事情。我不确定其余的,但我使用columnDefs选项来设置属性。

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

It still uses the createdCell option, but it mimics what I found in their documentation (https://datatables.net/reference/option/columns.createdCell).

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

#1