如何在一列中显示编辑删除按钮？答案

【问题标题】：How to show edit delete button in one column?如何在一列中显示编辑删除按钮？
【发布时间】：2020-12-09 02:59:43
【问题描述】：

实际上我面临一个小问题。我想在一列中显示编辑和删除按钮，但我无法做到这一点。让我与您分享我的代码。

var dataTable;
    $(document).ready(function () {
        dataTable = $("#tableId").DataTable({

            "ajax": {
                "url": "/Home/GetAllStock",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                { "data": "Stock_Name", "autowidth": true },
                { "data": "Stock_UOM", "autowidth": true },
                {
                    "data": "Stock_ID", "width": "50px", "render": function (data) {
                        return '<button class="btn btn-success" onclick="geteditstock(' + data + ')">Edit</button> <button class="btn btn-danger" onclick="Delete(' + data + ')">Delete</button>'
                    }

                },
                {
                    "data": "Stock_ID", "width": "50px", "render": function (data) {
                        return '<button class="btn btn-danger" onclick="Delete(' + data + ')">Delete</button>'
                    }
                }
            ]
        });
    });

我希望编辑和删除按钮显示在彼此相邻的一列中。我的输出是这样的。

【问题讨论】：

标签： javascript jquery jquery-ui datatables

【解决方案1】：

将宽度从 50px 更改为至少 200px，删除最后一列无用的并将两个按钮包装在一个 div 中。希望这会有所帮助！..快乐编码！

var dataTable;
    $(document).ready(function () {
        dataTable = $("#tableId").DataTable({

            "ajax": {
                "url": "/Home/GetAllStock",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                { "data": "Stock_Name", "autowidth": true },
                { "data": "Stock_UOM", "autowidth": true },
                {
                    "data": "Stock_ID", "width": "250px", "render": function (data) {
                        return '<div><button class="btn btn-success" onclick="geteditstock(' + data + ')">Edit</button> <button class="btn btn-danger" onclick="Delete(' + data + ')">Delete</button></div>'
                    }

                }
            ]
        });
    });```

【讨论】：

很高兴知道......快乐编码！