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

Posted 2023-05-09

【中文标题】如何在一列中显示编辑删除按钮？

【英文标题】：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>'
                    
                
            ]
        );
    );

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

【参考方案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>'
                    

                
            ]
        );
    );```

【讨论】：

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