Jquery Datatable编辑/删除图标

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

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

您可以添加详细信息和删除按钮，以及以同样的方式。