Adding html.actionLink to Jquery Datatable

Question

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.

user733421 · Accepted Answer · 2014-11-18 09:40:14Z

1

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

answered Nov 18, 2014 at 9:40

user733421

4974 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

m ali Over a year ago

hmm is there no way to use @Html.ActionLink or Url.Action. rather than a a tag?

user733421 Over a year ago

I'm not sure, but you shouldn't mix js with server side anyway. There are a lot of reasons why you shouldn't mix them up. For example, If you want to mimify your code, you couldn't or you'd have a hard time doing it.

user733421 Over a year ago

If you need your link to be dynamic , why don't you add it to the json?

user4156182 · Accepted Answer · 2014-11-18 09:42:36Z

1

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

answered Nov 18, 2014 at 9:42

user4156182

Collectives™ on Stack Overflow

Adding html.actionLink to Jquery Datatable

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related