jquery datatables actionlink how to add

Question

I have been searching for the last few hours, and unfortunately I cannot seem to find an example of how to populate a datatable with an action edit and delete link column using .net and MVC.

Here is what I have so far, how do I add an action link? 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 in 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 cannot figure out how to do it.

Answer 1

You could use the aoColumns property with fnRender function to add custom columns. You can't use the Html.ActionLink helper because you have to generate the links dynamically from the javascript. The aoColumns property helps you to configure each columns, if you don't want to configure a particular column just pass null else you have to pass an object({}).

The fnRender function helps you to create the links using the values of the other columns. You can use the oObj.aData to get the values of the other column like id to generate the 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 you return from the server, for the edit column also you have to return something like 1, 2, 3 or anything.

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

Answer 2

The fnRender has been depreciated and the mRender doesn't received the same parameters.

This works for me, follow the @Mark 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

The other responses are using legacy DataTables syntax. For DataTables 1.10+, the syntax for columnDefs 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: In order to get the Model in the ActionLink, I'm using JavaScript replace() to replace the string "replace" with data, which is defined as "RoleId" earlier in the columnDef