Data Table View Using REST API in sharepoint online

0
461
views

 

In this article, I have explained how to make a default SharePoint list view as data table view

Follow the below steps to display your SharePoint List in Data Table View using REST API

Step 1: Open sharepoint site -> Create a Custom List to manage your details

Step 2: Create an aspx Page

Code:

<%@ 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”>

/* JS Reference */

<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 */

<script type=”text/javascript” src=”../SiteAssets/JS/DataTable_View.js”></script>

/*CSS Reference */

<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”>

/*Hide Quick Launch*/

#sideNavBox{

display:none !important;

}

#contentBox{

margin-left:30px !important;

}

</style>

<script type=”text/javascript”></script>

</asp:Content>

Javascript:

var List_DataTable_View=

{

/* List Name */

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 List 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);

});

Final Result:

Please follow and like us:
0

LEAVE A REPLY

Please enter your comment!
Please enter your name here