Jquery Datatable 编辑/删除图标答案

【问题标题】：Jquery Datatable edit/delete iconsJquery Datatable 编辑/删除图标
【发布时间】：2017-02-13 14:55:32
【问题描述】：

我想在我的数据表中添加 2 个额外的列（编辑和删除）。我的数据表中的每一行都包含一个隐藏列，即记录 ID，因此当用户单击编辑或删除时，我希望获得选定的行 ID。

$(document).ready(function() {
            var mytable = $('#userTable').DataTable({
                "fixedHeader": {
                    "header": true,
                    "footer": true
                },

                "lengthMenu": [[25, 50, 100, 200, -1], [25, 50, 100, 200, "All"]],

                "ajax": {
                    "url": "/Users/Prov",
                    "type": "Get",
                    "data": { "id": "@userId", "cityId": "@cityId" },
                    "datatype": "json"

                },

                "columnDefs": [
                    {
                        "targets": -1,
                        "data": null,
                        "defaultContent": "<button>Delete!</button>"
                    }
                ],

                "columns": [
                    { "data": "Id", "visible": false, "searchable": false },
                    { "data": "Name" },
                    { "data": "City" },
                    { "data': "Code" },
                    { "data': "Title" },
                ]


            });

            $('#userTable tbody').on('click', 'button', function() {
                var rowData = mytable.row($(this).parents('tr')).data();
                alert(rowData[1] + "'s City is: " + rowData[2]);
            });
        });

【问题讨论】：

标签： jquery asp.net-mvc datatables

【解决方案1】：

您需要通过在数据表的列数组属性中指定一个新列来添加另一个带有编辑超链接的列，然后通过查询字符串将 id 传递给编辑操作，例如：

"columns": [
                { "data": "Id", "visible": false, "searchable": false },
                { "data": "Name" },
                { "data": "City" },
                { "data": "Code" },
                { "data": "Title" },
                {
                            "title": "Edit",
                            "data": "Id",
                            "searchable": false,
                            "sortable": false,
                            "render": function (data, type, full, meta) {
                                return '<a href="@Url.Action("Edit","Users")?id=' + data + '" class="editUser">Edit</a>';
               }
           ]

它将调用作为参数传递的 id 的编辑控制器，您的编辑操作如下：

public ActionResult Edit(int id)
{
     // do the business logic here 
}

您也可以添加详细信息和删除按钮。

【讨论】：