How to add link to Title field when list data is fetched using REST API and rendered through Datatable.js

Question

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th>Title</th>  
            <th>Id</th>
        </tr>
    </thead>
</table>
</div>  
</body>

 var call = $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('listname')/items?$select=Title,Id,
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json;odata=verbose"
        }
    });
call.done(function (data,textStatus, jqXHR){
   $('#example').dataTable({
        "sDom": '<"H"Cfr>t<"F"ip>',
        "bJQueryUI": true,
        "bDestroy" : true,
        "bProcessing": true,
         "aaData": data.d.results,
         "aoColumns": [
        { "mData": "Title",
                          "mData": "Id" } 
      ]
    });
});

Using above SharePoint REST API Code I am able to get all list items Title & id field in the datatable, however what I am looking for is how to add links to Title field which will take URL to DispForm.aspx?Id=?? page. Basically, trying to create a custom view which will have link to Title field and few other columns displayed in the datatable. I have just started using SharePoint REST API and datatable.js so not sure if it can be achieved. If someone knows or have a different idea please share.

The following blog post may have some useful information for you. Your issue is with the jQuery Datatable. You need to learn about its options. markrackley.net/2013/10/17/… — CM Kanode
– CM Kanode, Commented Apr 25, 2014 at 12:26
CM Kanode, above link was starting point for me to work with REST and datatables, unfortunately it doesnt have information about question asked. — user12345
– user12345, Commented Apr 25, 2014 at 12:57
Did you click on the link for Datatables, and read the documentation? — CM Kanode
– CM Kanode, Commented Apr 25, 2014 at 14:07

cubanGuy · Accepted Answer · 2014-06-20 20:55:17Z

I'm not a programmer, but probably you can try something like this:

HTML:

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" 
id="example">
<thead>
<tr>
<th>Title</th>  
<th>Id</th>
</tr>
</thead>
</table>
</div>  
</body>

JS:

$('#example tr td:nth-child(2)').each(function (index, element) {
var tn = $(element).text();
var val = $(this).next('td').text();
$(element).html('<a href="https://xxxxx-xxxxx/Lists/ListName/DispForm.aspx?ID=' + val + '&typ=1&lang=de">' + tn + '</a>');
});

You may be able to run this with a function callback within DataTables or just after the table has been generated.

Stack Exchange Network

How to add link to Title field when list data is fetched using REST API and rendered through Datatable.js

1 Answer 1

Hot Network Questions

How to add link to Title field when list data is fetched using REST API and rendered through Datatable.js

1 Answer 1

Related

Hot Network Questions