Question

我想在我的数据表中添加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]);
            });
        });

Answer 1

您需要通过在datatables的columns数组属性中指定一个新列来添加另一个带编辑超链接的列，然后通过查询字符串将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 
}

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

Jquery Datatable编辑/删除图标

1 个答案: