How to set data for a specific column using jQuery

Question

I'm new with jQuery DataTables plugin. I have encountered an issue which I'm stuck and don't have an idea on how to proceed.

First, this is the implementation inside of my controller class (PlaylistId is of type GUID)

    public ActionResult PlayListAjaxHandler(JQueryDataTableParamModel param)
        {
            var result = from c in playLists
                         select new IComparable[]
                         {
                             c.PlaylistName,
                             c.PageSecondsRefresh,
                             c.ImageSecondsRefresh,
                             c.SubscriptionName,
                             Convert.ToString(c.PlaylistId)
                         };

            return Json(new
            {
                param.sEcho,
                iTotalRecords = playListViewModel.Count,
                iTotalDisplayRecords = files.Length,
                aaData = result
            }, JsonRequestBehavior.AllowGet);
}

This is the structure of JSON data that is returned

{
"sEcho": "1",
"iTotalRecords": 3,
"iTotalDisplayRecords": 3,
"aaData": [
    ["ChorusLab", 86400, 3, "Solta", "4020b281-2af6-478e-a9a2-b3582d5941db"],
    ["Solta Landscape", 60, 2, "Solta", "3fd61499-fa1e-4584-bcad-57cdd40d2b4b"],
    ["Solta Portrait", 0, 0, "Solta", "1b08e36a-dbe4-4846-a91e-24ec69453407"]
]

}

As you can see, aaData is an array of element 3 which each element is also an array. I want to bind the GUID element inside of this array to an anchor tag in my page.

script implementation in .cshtml page

<script language="javascript" type="text/javascript">
$(document).ready(function () {
    var oTable = $("#tblPlaylist").DataTable({
        "iDisplayLength": 10,
        "bServerSide": true,
        "sAjaxSource": "@Url.Content("PlayListAjaxHandler")",
        "bProcessing": true,
        "bStateSave": true,
        "aoColumns": [
            {
                "sName": "PlayListName",
                "bSearchable": true,
                "bSortable": true,
                "sWidth": '30%'
            },
            {
                "sName": "PageRef",
                "bSearchable": true,
                "bSortable": true,
                "sWidth": '10%'
            },
            {
                "sName": "NextImg",
                "bSearchable": true,
                "bSortable": true,
                "sWidth": '10%'
            },
            {
                "sName": "Subscription",
                "bSearchable": true,
                "bSortable": true,
                "sWidth": '20%'
            },
            {
                "sName": "Action",
                "bSearchable": false,
                "bSortable": false,
                "sWidth": '30%',
                "render": function (data) {
                    return '<a href=\"PlayListEdit/' + data[4] + '\">Edit</a><b>&nbsp;&nbsp;</b>' +
                           '<a href=\"ViewContent/' + data[4] + '\">View Files</a><b>&nbsp;&nbsp;</b>' +
                           '<a href=\"Play/' + data[4] + '\">Play</a>';
                }
            }
        ]
    });
});

My problem is, I'm not sure if that is the correct way to bind the returned data (specifically the PlaylistId) into the 3 anchor tags (Edit, View Files, Play).

{
                "sName": "Action",
                "bSearchable": false,
                "bSortable": false,
                "sWidth": '30%',
                "render": function (data) {
                    return '<a href=\"PlayListEdit/' + data[4] + '\">Edit</a><b>&nbsp;&nbsp;</b>' +
                           '<a href=\"ViewContent/' + data[4] + '\">View Files</a><b>&nbsp;&nbsp;</b>' +
                           '<a href=\"Play/' + data[4] + '\">Play</a>';
                }
            }

I have checked the documentation in DataTables but I can't get the correct way of doing it.

Any help is greatly appreciated.