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 
} 

您可以添加詳細信息和刪除按鈕，以及以同樣的方式。