时间戳

首页 > 解决方案 > 如何在一列中显示编辑删除按钮？

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

问题描述

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

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

标签： javascriptjqueryjquery-uidatatables

解决方案

将宽度从 50 像素更改为至少 200 像素，删除无用的最后一列并将两个按钮包装在一个 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>'
                    }

                }
            ]
        });
    });```

推荐阅读