enter image description hereenter image description hereI have a list with title as one of the column which is of clickable and am using jQuery to show the list items in one of my SharePoint page I am getting the name of the title but unable to make it clickable. How would i make it to be available as clickable as available in list Am using SharePoint 2010. I am binding the data to jQuery datatable here. Find the piece of code i have tried still now.

`var Title = listItem.get_item("Title");'
            if (empName === Name)
                var newItem = {};
                newItem["Employee"] = empName;
                if (anonymous == 1) {
                    newItem["Author"] = anonyasText;
                else {
                    newItem["Author"] = ShoutoutBy;
                newItem["Title"] = Title;
                newItem["CreatedOn"] = createdOn;
                //newItem["_ModerationStatus"] = modStatAsText;

        var shootOut = $("#tblShootOutReport").DataTable({
            "aaData": ShoutoutDataSub,
            "bLengthChange": false,
            "bPaginate": false,
            "oLanguage": {
                "sEmptyTable": "No Items to show",
                "sInfoEmpty": ""
            "sDom": '<"top">f<"bottom"><"clear">',
            "aoColumns": [{ "sTitle": "Shootout By", "mData": "Employee", "sWidth": "10%" },
                        { "sTitle": "Shoutout Date", "mData": "CreatedOn", "sWidth": "8%" },
                        { "sTitle": "Title", "mData": "Title", "sWidth": "10%" },
                        { "sTitle": "Shoutout To", "mData": "Author", "sWidth": "10%" }
            "bJQueryUI": true,
            "bSort": true,
            "bAutoWidth": true,
            "iDisplayLength": 100,
            "sPaginationType": "full_numbers",
            "bStateSave": true,
            "bDestroy": true


1 Answer 1


You can add a column render callback when you specify columns definition.

"aoColumns": [
    { "sTitle": "Shootout By", "mData": "Employee", "sWidth": "10%" },
    { "sTitle": "Shoutout Date", "mData": "CreatedOn", "sWidth": "8%" },
    { "sTitle": "Title", "mData": "Title", "sWidth": "10%", "render":function (data, type, row, meta) {
            return '<a onclick="alert(' + data + ');" href="#">' + data + '</a>';
    { "sTitle": "Shoutout To", "mData": "Author", "sWidth": "10%" }


  1. You need to update the way you are populating title field as

    newItem["Title"]="<a href='http://siteurl/lists/listname/displayform.aspx?id=" + listItem.get_id() + "'>" + title + "</a>";

Change siteurl and listname

  • Hi Amal the items from list with title as one of the columns are having an unique id at the end of each item as shown below...for e.g for first item the Title is Test1 it is having ID=1 and for 2nd item Title it has ID=2 and so on how would i represent it on for rendering it. Thanks for your response.
    – SPLearner
    Commented Apr 20, 2015 at 21:03
  • I want to extract the title url as i get the title name in my datatable when i click it it should take me to the list item. As shown in fig.
    – SPLearner
    Commented Apr 20, 2015 at 21:32
  • I have also updated the result i am getting using ur snippet it takes me no where but am getting is as clickable, it should take me to the list item once i click on it.
    – SPLearner
    Commented Apr 20, 2015 at 21:38
  • Amal that worked like a charm ....thank u soo much ...can you tell me what the function (data, type, row, meta) does actually and is it unique function with those properties in it?
    – SPLearner
    Commented Apr 21, 2015 at 13:12
  • Check jQuery datatable documentation.. it supports a render function which can be used on how to override the rendering of fields.. Commented Apr 21, 2015 at 13:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.