Jquery datatables actionlink how to add

Question

I have been looking for the past few hours, and unfortunately I cannot find an example of how to populate a datatable using link to edit and delete links using .net and MVC.

Here is what I still have, how to add a link to an action? What am I missing?

<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> 

I want to add this to the last column;

  <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> 

But I can’t understand how to do this.

Answer 1

You can use the aoColumns property with the fnRender function to add your own columns. You cannot use the Html.ActionLink because you need to dynamically generate links from javascript. The aoColumns property allows you to configure each column, if you do not want to configure a specific column, just go null otherwise you need to pass object({}) .

The fnRender function helps you create links using the values ​​of other columns. You can use oObj.aData to get the values ​​of another column, such as id , to create links.

 <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> 

Another important thing in the JSON output that you return from the server, for the edit column, you also need to return something like 1, 2, 3 or something else.

Link: http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html

Answer 2

fnRender was devalued, and mRender did not receive the same parameters.

This works for me, follow @Mark's example:

  { // 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

Other answers use the deprecated DataTables syntax. For DataTables 1.10+, the columnDefs syntax is as follows:

 $('#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 ] }); 

note: To get the model in ActionLink, I use JavaScript replace () to replace the "replace" line with data , which is defined as "RoleId" earlier in the Def column

Answer 4

Another approach with 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 5

I used the mentioned code for datatable 1.10+, but I get the row in the datatable cell instead of the link.

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

note that using and old version of mvc3 on solution Here is my 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

I found another way to get this actionlink to work using the help from this post (olivier comments):

you add data tag attributes to the node table that you reuse in javascript

in cshtml:

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

in your * .js file in the columndefs area:

  "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> | '