Show SharePoint List Data in Table View using REST API

This SharePoint Rest API tutorial, we will discuss how to display your SharePoint 2013 List in Data Table View using the REST API.

Here first we will create a custom list which has few columns and the list looks like below. Then we will write our code to display the list items into a datatable.

Show SharePoint List Data in Table View using REST API

Create an Aspx Page. The .aspx page code looks like below:

<%@ Page Language="C#" masterpagefile="~masterurl/default.master" inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content id="Content1" runat="Server" contentplaceholderid="PlaceHolderMain">
<div id="DataTable_View"></div>
</asp:Content>
<asp:Content id="Content2" runat="server" contentplaceholderid="PlaceHolderAdditionalPageHead">
<script type="text/javascript" src="../SiteAssets/Jquery/jquery-1.11.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="../SiteAssets/Jquery/underscore-min.js"></script>
<script type="text/javascript" src="../SiteAssets/Jquery/jquery.dataTables.js"></script>
<script type="text/javascript" src="../SiteAssets/JS/DataTable_View.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" href="../SiteAssets/CSS/jquery.dataTables.min.css"/>
<style type="text/css">
#sideNavBox{
display:none !important;
}

#contentBox{
margin-left:30px !important;
}
</style>
<script type="text/javascript"></script>
</asp:Content>

JS code:

var List_DataTable_View=
{
List_Name: ‘DataTable_View_Custom’,
/* Ajax Call */

Jquery_Ajax:function(Jquery_Url,Success_Function,Error_Function){
$.ajax({
url: Jquery_Url,
type: "GET",
headers: { "Accept": "application/json;odata=verbose" },
success: Success_Function,
error: Error_Function,
});
},

/* Process the details*/
Get_Custom_List_Details:function(data)
{
var Retrieved_Obj=JSON.parse(JSON.stringify(data.d.results));

$(‘#DataTable_View’).append("<table border=’2′ style=’border-collapse:collapse;margin-top:10px;’ id=’dataview’><thead><tr><th>First Name</th><th>Last Name</th><th>Department</th><th>Designation</th></tr></thead><tbody id=’List_Details’></tbody></table>");
_.each(Retrieved_Obj,function(Details) {
$(‘#List_Details’).append("<tr><td>"+Details.FirstName+"</td><td>"+Details.LastName+"</td><td>"+Details.Department+"</td><td>"+Details.Designation+"</td>");
});
$(‘#dataview’).dataTable();
},
}

$(document).ready(function () {
List_DataTable_View.Site_Url=_spPageContextInfo.webAbsoluteUrl;
/* Retrieve Custom list Details */
List_DataTable_View.Url=List_DataTable_View.Site_Url+"//_api/web/lists/getbytitle(‘"+List_DataTable_View.List_Name+"‘)/items";
List_DataTable_View.Jquery_Ajax(List_DataTable_View.Url,List_DataTable_View.Get_Custom_List_Details,List_DataTable_View.Ajax_Error);
});

List -Data Table View:

After this the list view will look like below:

Show SharePoint List Data in Table View using REST API

You may like following SharePoint Rest API tutorials:

This SharePoint tutorial we discussed how to display SharePoint List Data in Table View using REST API

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>