JQuery - 如何将按钮添加到表中的列答案

【问题标题】：JQuery - how to add a button to an column from the tableJQuery - 如何将按钮添加到表中的列
【发布时间】：2019-02-28 02:26:40
【问题描述】：

我想在 Action 列中添加一个按钮，但我无法输入 data-activateUser= item["AspNetUserId"] 的值。我正在使用插件 DataTables 顺便说一句。

我的桌子

数据源

$.getJSON("/Account/InactiveAccounts").then(function (items) {
                var item = items;
                console.log(item["UserAccounts"]);
                $('#inactive-accounts').DataTable({
                    columnDefs: [{ targets: 'no-sort', orderable: false }],
                    data: item["UserAccounts"],
                    "processing": true,
                    columns: [
                        { data: "Username" },
                        { data: "Password" },
                        { data: "Email" },
                        {
                            data: function () {
                                return `<button onclick="clickDeactivateUser(this)" class="btn btn-danger btn-sm" data-activateUser=`+ item["AspNetUserId"] +`>Activate</button>
                                            `;
                            }
                        }
                    ]

                });

JSON 数据

【问题讨论】：

您的按钮是成功创建还是没有显示？我认为您需要使用render 函数而不是直接将数据分配给data 属性；见here添加按钮列。
创建成功
但是当我尝试从按钮获取data-activateUser 时，它给了我未定义的错误
您是否在某处使用了$(this).data('activateUser') 并返回未定义？您是否无法将属性放入按钮元素中，或者在渲染后从按钮中存在的该属性中获取值？
@LouysPatriceBessette 谢谢先生。未定义的错误消失了，但似乎 item["AspNetUserId"] 为空

标签： javascript jquery json datatable

【解决方案1】：

请更改您的

data: function () {
    return `<button onclick="clickDeactivateUser(this)" class="btn btn-danger btn-sm" data-activateUser=`+ item["AspNetUserId"] +`>Activate</button>`;
}

到

render: function (data, type, row, meta) {
    return '<button onclick="clickDeactivateUser(this)" class="btn btn-danger btn-sm" data-activateUser="'+ row.AspNetUserId +'">Activate</button>';
}

有关渲染器的更多详细信息，请查看this

【讨论】：

谢谢先生，它有效，我认为只是对 json 数组感到困惑，请考虑撤消否决，谢谢。