Show SharePoint List Data in Table View using REST API

sharepoint list data rest api
InfoPath alternatives for form designing SharePoint

In this post we will discuss how to display your SharePoint 2013 List in Data Table View using 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.

sharepoint list data rest api
sharepoint list data 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:

sharepoint 2013 list data rest api
sharepoint 2013 list data rest api

Hope this article will be helpful.

Similar SharePoint 2013 Tutorials


Leave a Reply