jQuery的數據表ActionLink的如何添加

Question

我一直在尋找的最後幾個小時，不幸的是我似乎無法找到如何填充與動作編輯一個DataTable和使用.NET和MVC刪除鏈接欄的例子。

這是我到目前爲止，如何添加一個操作鏈接？我錯過了什麼？

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#myDataTable').dataTable({ 
     bProcessing: true, 
     sAjaxSource: '@Url.Action("Index1", "Default1")' 
    }); 

}); 
</script> 

<div id="container"> 
<div id="demo"> 
    <table id="myDataTable"> 
     <thead> 
      <tr> 
       <th> 
        RoleId 
       </th> 
       <th> 
        RoleName 
       </th> 
       <th> 
        UserId 
       </th> 
       <th> 
        UserName 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
</table>  
</div> 
</div> 

我想在最後一列添加這個;

<td> 
     @Html.ActionLink("Edit", "Edit", new {id=item.PrimaryKey}) | 
     @Html.ActionLink("Details", "Details", new { id=item.PrimaryKey }) | 
     @Html.ActionLink("Delete", "Delete", new { id=item.PrimaryKey }) 
    </td> 

但無法弄清楚如何去做。

Answer 1

您可以使用aoColumns屬性與fnRender功能添加自定義列。 您不能使用Html.ActionLink幫助程序，因爲您必須從javascript動態生成鏈接。 aoColumns屬性可幫助您配置每列，如果您不想配置特定列只是通過null否則您必須通過object({})。

的fnRender功能可幫助您創建使用其他列的值的鏈接。您可以使用oObj.aData來獲取其他列的值，如id以生成鏈接。

<script type="text/javascript">  
    $(document).ready(function() { 
     $('#myDataTable').dataTable({ 
      bProcessing: true,   
      sAjaxSource: '@Url.Action("Index1", "Default1")', 
      aoColumns: [ 
         null, // first column (RoleId) 
         null, // second column (RoleName) 
         null, // third (UserId) 
         null, // fourth (UserName) 

         {  // fifth column (Edit link) 
         "sName": "RoleId", 
         "bSearchable": false, 
         "bSortable": false, 
         "fnRender": function (oObj)        
         { 
          // oObj.aData[0] returns the RoleId 
          return "<a href='/Edit?id=" 
           + oObj.aData[0] + "'>Edit</a>"; 
         } 
         }, 

         { }, // repeat the samething for the details link 

         { } // repeat the samething for the delete link as well 

        ] 
    }); 
}); 
</script> 

在JSON輸出從服務器返回，在編輯欄另一個重要的事情你也必須返回像1，2，3或任何東西。

參考：http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html

Answer 2

的fnRender現在已經貶值和mRender不接受相同的參數。

這個工作對我來說，遵循@馬克例如：

{  // fifth column (Edit link) 
    "sName": "RoleId", 
    "bSearchable": false, 
    "bSortable": false, 
    "mRender": function (data, type, full) { 
     var id = full[0]; //row id in the first column 
     return "<a href='javascript:alert("+id+");'>Edit</a>"; 
    } 

Answer 3

與aoColumnDefs

$('#myDataTable').dataTable({ 
    bProcessing: true, 
    sAjaxSource: '@Url.Action("Index1", "Default1")' 
    aoColumnDefs: [{ 
        "aTargets": [4], //Edit column 
        "mData": "RoleId", //Get value from RoleId column, I assumed you used "RoleId" as the name for RoleId in your JSON, in my case, I didn't assigned any name in code behind so i used "mData": "0" 
        "mRender": function (data, type, full) { 
         return '<a href=' + 
          '@Url.Action("Edit", "Default1")?RoleId=' + data + 
          '>Edit</a>'; 
        } 
        },{ 
        "aTargets": [5], //Detail column 
        "mData": "RoleId", 
        "mRender": function (data, type, full) { 
         return '<a href=' + 
          '@Url.Action("Detail", "Default1")?RoleId=' + data + 
          '>Detail</a>'; 
        } 
        },{ 
        "aTargets": [6], //Delete column 
        "mData": "RoleId", 
        "mRender": function (data, type, full) { 
         return '<a href=' + 
          '@Url.Action("Delete", "Default1")?RoleId=' + data + 
          '>Delete</a>'; 
        } 
        }] 
}); 

Answer 4

其他反應使用的是舊版的DataTable語法的另一種方法。對於數據表1.10+，爲columnDefs的語法如下：

$('#MyDataTable').DataTable({ 
    "processing": true, 
    "ajax": '@Url.Action("Index1", "Default1")', 
    "columnDefs": [ 
     {"targets": [4], "data": "RoleId", "render" : function(data, type, full) { return '@Html.ActionLink("Edit", "Edit", new {id = "replace"})'.replace("replace", data);}}, 
     {}, //repeat 
     {} //repeat 
    ] 
}); 

注：爲了獲得在ActionLink的模型，我使用JavaScript replace()替換字符串data「替換」，其定義作爲「角色ID」早在columnDef

Answer 5

我用提到的代碼數據表1.10+但在數據表中的細胞，而不是鏈接得到的字符串。

@Html.ActionLink("Edit", "Edit", new {id = "294"}) 

注意，使用老MVC3版本的解決方案 這裏我的javascript：

$(document).ready(function() { 

var tenantid = $('#tenantid').text(); 
$("#title").html("<h1>User List for TenantID: "+ tenantid + " </h1>"); 

var oTable = $('#list').DataTable({ 
    "serverSide": true, 
    "ajax": { 
     "type": "POST", 
     "url": '/User/DataHandler', 
     "contentType": 'application/json; charset=utf-8', 
     'data': function (data) 
     { 
      data.ID = tenantid; 
      return data = JSON.stringify(data); 
     } 
    }, 
    "dom": 'lfrtiSp',   
    "processing": true, 
    "paging": true, 
    "deferRender": true,   
    "pageLength": 10, 
    "lengthMenu": [5, 10, 25, 50, 75, 100], 
    "columnDefs": [ 
     { "targets": [-1], "data": "UserID", "render": function (data, type, row, meta) { return '@Html.ActionLink("Edit", "Edit", new {id = "replace"})'.replace("replace", row.UserID); } } 

    ], 

    "columns": [ 
     { "data": "UserID", "orderable": true }, 
     { "data": "UserGUID", "orderable": false }, 
     { "data": "UserName", "orderable": true }, 
     { "data": "UserEMAil", "orderable": true }, 
     { "data": "UserIsDeleted", "orderable": true }, 
     { "data": "Action", "orderable": false } 
    ], 

    "order": [0, "asc"] 

    }); 
}); 

Answer 6

我發現了另一種方式來獲得這種ActionLink的工程，並使用幫助，從這個post（奧利維爾評論）：

您在表格節點中添加數據標籤屬性，您可以在cshtml中使用Javascript

：

<table class="table table-striped display" id="list" 
      data-url-edit="@Url.Action("Edit","User", new { id = "replace"})" 

在您的* .js文件的部份columndefs區域文件：

"columnDefs": [ 
     { 
      "targets": [-1], "data": "UserID", "render": function (data, type, row, meta) { 
       return '<a href="' + $('#list').data('url-edit').replace("replace", row.UserID) + '">Edit</a> | ' 
        + '<a href="' + $('#list').data('url-details').replace("replace", row.UserID) + '">Details</a> | '