SharePoint REST and DataTables.net (SP2013) Select Items

Question

I had opened this thread in an other area of StackExchange, but then I found the SharePoint area, sorry for the duplicates.

I am fairly new to SP and we are still using an old version, so looking for some new functionality to bring year experience up... sorry if this has been asked and I missed the thread.

I have been looking for a way to get a better presented lists, and I found a great article (https://info.summit7systems.com/blog/who-needs-a-data-view-web-part-sharepoint-rest-and-datatables-net) about using DataTables and REST.

The solution works great is simple to use, but I cannot for the life of me figure out how to make a searched / filtered list item selectable where a field can have a link to open the it in the Default Display Form page (DispForm.aspx).

Any pointers or examples would be great. Thanks

Answer 1

Well, if you look at the URL when an item is opened in the Display Form, you can see that it includes the item ID:

https://your-server/sites/YourSite/Lists/YourList/DispForm.aspx?ID=4

So, you're going to have to get the IDs of the items in your REST call to get the data from the list. This is done by adding it to the $select part of the query. In the example you linked to , he is only retrieving 3 columns (Title, Column2, and Column3), so you would just add ID to the $select:

_spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('ZipCodes')/items?$select=Title,Column2,Column3,ID"

Now, there's probably a way to get the ID data in the Title column so you can turn the Title text into a link to open the item, but a much easier way would be to just add a column to the table for the ID data, and then override the DataTables rendering for the column to render out a link with the correct URL to DispForm.aspx with the ID as the query parameter that DispForm.aspx is looking for. Going along still with the example you linked to it would be something like:

$('#example').dataTable({
    "destroy": true,
    "processing": true,
    "data": data.d.results,
    "columns": [
        { "data": "Title" },
        { "data": "Column2" },
        { "data": "Column3" },
        {
            "data": "ID",
            "render": function (data, type, row) {
                // in here, the "data" parameter will be the SharePoint ID value
                // of the currently rendering item
                var url = _spPageContextInfo.webAbsoluteUrl + "/sites/YourSite/Lists/YourList/DispForm.aspx?ID=" + data;
                return "<a href='" + url + "'>View Item</a>";
            }
        }
    ]
});

(Don't forget you'd need to add a column to the base HTML table that you point DataTables at.)

That should make the link part of the row for that item, so it would "travel along" with it through whatever sorting or filtering happens.