禁用表中特定行的删除按钮

Question

你好，

我想要当IsActive = "N"时，该行的删除按钮应被禁用。

这是代码：

$('#tblLocation').DataTable({
            "ajax": {
                "url": '/Location/List',
                "type": "get",
                "datatype": "json",
                dataSrc: ""
            },
            paging: true,
            sort: true,
            pageLength: 10,
            searching: true,
            "columns": [
                { "data": "Id", "autoWidth": true },
                { "data": "Description", "autoWidth": true },
                { "data": "IsActive", "autoWidth": true },
                {
                    "data": "Id", "render": function (data) {
                        return "<a class='btn btn-primary btn-sm' data-Id=" + data + " id='btnEdit'><i class='fa fa-pencil'></i> Edit</a> <a class='btn btn-danger btn-sm' data-Id=" + data + " id='btnDelete' style='margin-left:5px' ><i class='fa fa-trash'></i> Delete</a>";
                    }
                }
            ]
        });

谢谢。

Note: 该案例整理于：Disable Delete button

Answer 1

你好，

您可以在数据表列中使用渲染。 style ="pointer-events：none"可以禁用该按钮。

像这样：

var table=$('#example').DataTable({
                ajax: {
                    "url": '/WebForm10.aspx/List',
                    "type": "POST",
                    "datatype": "json",
                    "contentType": 'application/json; charset=utf-8',
                    "dataSrc": function (data) {
                        return JSON.parse(data.d);
                    }
                },
                "columns": [
                    { "data": "Id" },
                    { "data": "Description" },
                    { "data": "IsActive" },
                    {
                        "data": "Id",
                        'render': function (data, type, row) {
                            if (row.IsActive == 'N') {
                                return "<a href='#'  class='btn btn-primary btn-sm' data-Id=" + data + " id='btnEdit'><i class='fa fa-pencil'></i> Edit</a> <a class='btn btn-danger btn-sm' data-Id=" + data + " id='btnDelete' style='margin-left:5px' href='#' style='pointer-events: none'><i class='fa fa-trash'></i> Delete</a>";
                            }
                            else {
                                return "<a href='#' class='btn btn-primary btn-sm' data-Id=" + data + " id='btnEdit'><i class='fa fa-pencil'></i> Edit</a> <a class='btn btn-danger btn-sm' data-Id=" + data + " id='btnDelete' style='margin-left:5px' href='#' ><i class='fa fa-trash'></i> Delete</a>";
                            }
                        }
                    }
                ],
            })

---

如果答案是正确的解决方案，请单击“接受答案”并请投赞成票。如果您对此答案有其他疑问，请点击“评论”。
注意：如果您想接收此线程的相关电子邮件通知，请按照我们文档中的步骤启用电子邮件通知。
最好的问候