Adding html.actionLink to Jquery Datatable

2.5k views Asked by At

want to add HTML.actionlink to Jquery Datatable.

Am wokrking on this existing site made by someone else. For adding data they used Jquery Datatable with is new to me.

This is the data table:

             this.oUserList = $('#UserList').dataTable({
                "bLengthChange": false,
                "bSort": true,
                "bRetreive": true,
                "bDestroy": true,
                "aaSorting": [[0, "asc"]],
                "bProcessing": true,
                "sAjaxSource": "@Url.Action("GetUsers","Users")",
                "sAjaxDataProp": "Result",
                "aoColumns": [
                    { "mDataProp": function(source, type, val) {
                        return source.FirstName + ' ' + source.LastName;
                    }, "bSortable": true },
                    { (1st column },
                    { 2ndcolumn},
                    {
                        3rd column
                        }, "bSortable": false },
                    {
                        4th column
                        }, "bSortable": false
                    },
                    {
                        5th column
                        }, "bSortable": false
                    },

Here is where i want to change it to action link

                    { (6th)
                        "mDataProp": function (source, type, val) {
                            return M2.JsonDateToString(source.DateLastLogin);
                        }, "bSortable": false
                    },

My 6th column is a duplicate of the 5th, but what i need here is an action link, like this: (How i normally implement them):

  <td>@Html.ActionLink("Edit Roles", "Edit", "Users", new { userName = "User\\" + u.UserName }, new { @class = "action" }) </td>

So what I want to no is how do you add a html actionLink to a Jquery Datatable.

2

There are 2 answers

3
user733421 On

Use the source json object to build the anchor:

this should work

{ 
   "mDataProp": function (source, type, val) {
          return '<a href="/Home/Edit/'+source.UserName+'">Edit Roles</a>'

   }, "bSortable": false
},
0
AudioBubble On

Use this article www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part