Scribd
Upload
218 views

Using Jquery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages PDF

Uploaded by

Vincent Tacda
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
218 views

Using Jquery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages PDF

Uploaded by

Vincent Tacda
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

8/20/2020 Using jQuery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages

Tune in FREE to the React Virtual Conference Sep. 11 at 10am ET x

LEARN: React Virtual Conference


Using jQuery DataTable To Display SharePoint 2013
C# Corner vincenttacda
List Data On SharePoint Site Pages
Post Ask

Guest User Updated date Feb 17, 2018 67.1k


Question 11 5

Download Free .NET & JAVA Files API


Try Free File Format APIs for Word/Excel/PDF

SourceCode.zip

Introduction

In this article, we will learn how to pass SharePoint List Data to a jQuery DataTable using REST API
and display SharePoint list data on SitePages using DataTable.

DataTables is a plug-in for the jQuery Javascript library. It is a highly exible tool, based on the
foundations of progressive enhancement, and will add advanced interaction controls to any
HTML table.

[O cial Site] : https://datatables.net/ - Please refer to the o cial site for documentation and the
getting started guide
 
Before starting with this post, we must have some basic knowledge of the following.

HTML Tables
Rest API in SharePoint
JavaScript 

Implementation
 
Step 1

Create a Sharepoint List with data, this is the list from which we will retrieve the data and pass the
data to jQuery DataTable. Skip this step if you already have the Data Source List on your
SharePoint Site.
https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/ 1/13
8/20/2020 Using jQuery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages

 
I have created a list of sample data for our project, Sample Data Source: jQuery DataTable O cial
Site, You can also use import
LEARN: Reactspreadsheet SharePoint App to import bulk data from excel
Virtual Conference
spreadsheet 
  C# Corner vincenttacda
Post Ask

Question

 
Step 2

Now we will create the script le and the html Site page for displaying the list data.

HTML le to render the data 


JS le to get the data from SharePoint list.

Go to Data Table CDN to get the required JS and CSS les.

We need to follow CDN scripts, that are required to be used in our functionality

jquery.min.js
jquery.dataTables.min.js
jquery.dataTables.min.css
dataTables.jqueryui.min.css 

Create the HTML le in a text editor (I use notepad ++)


 
Note

https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/ 2/13
8/20/2020 Using jQuery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages

jquery.min.js should be loaded before jquery.dataTables.min.js as shown in the below code block,

01. <!DOCTYPE html>


02. <html> LEARN: React Virtual Conference
03. <head>
04.
C# Corner vincenttacda
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/li
</script> Post Ask
05. <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/j
</script> Question
06.
07. <script type="text/javascript" src="/SiteAssets/GetData.js">
</script>
08. <!--External js file to get data from SharePoint List -->
09.
10. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/
11. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.co
12. </head>
13. <body>
14. <div>
15. <table id="table_id" class="display" cellspacing="0" width="100%">
16. <thead>
17. <tr>
18. <th>Name</th>
19. <th>Position</th>
20. <th>Office</th>
21. <th>Age</th>
22. <th>Joining Date</th>
23. </tr>
24. </thead>
25. <tfoot>
26. <tr>
27. <th>Name</th>
28. <th>Position</th>
29. <th>Office</th>
30. <th>Age</th>
31. <th>Joining Date</th>
32. </tr>
33. </tfoot>
34. </table>
35. </div>
36. </body>
37. </html>

Step 3

Now, we will get Data from the SharePoint list. For this, write a function to get the data, using
REST API.
 
Create the GetData.js le in a text editor (I use notepad ++)

01. function loadItems() {


02. var siteUrl = _spPageContextInfo.siteAbsoluteUrl;

https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/ 3/13
8/20/2020 Using jQuery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages

03. var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('EmployeeInfo')/ite


$select=Title,Position,Office,Age,Joining_x0020_date";
04. $.ajax({
05. LEARN:
url: React Virtual Conference
oDataUrl,
06. type: "GET",
07. dataType: "json", C# Corner vincenttacda
08. headers: {
Post Ask
09. "accept": "application/json;odata=verbose"
10. },
11. success: mySuccHandler, Question
12. error: myErrHandler
13. });
14. }

Note

Use $top=5000 if items more than 100.


 
$select lter values should be the internal names of the columns, verify the values using a
browser-based GET Request [Use Internet Explorer Only] Internet Explorer Screenshot - Put API
Url in the browser,

Step 4

Now we will bind the data obtained from the API Call with the jQuery DataTable [HTML View].
 
mySuccessHandler function binds the data to the DataTable. 

01. function mySuccHandler(data) {


02. try {
03.
04. $('#table_id').DataTable({
05.
06. "aaData": data.d.results,
07. "aoColumns": [
08. {
https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/ 4/13
8/20/2020 Using jQuery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages

09. "mData": "Title"


10. },
11. {
12. LEARN: React Virtual Conference
"mData": "Position"
13. },
C# Corner vincenttacda
14. {
15. "mData": "Office"
Post Ask
16. },
17. {
18. "mData": "Age" Question
19. },
20. {
21. "mData": "Joining_x0020_date"
22. }
23. ]
24. });
25. } catch (e) {
26. alert(e.message);
27. }
28. }

myErrHandler function 

01. function myErrHandler(data, errMessage) {


02. alert("Error: " + errMessage);
03. }

Our GetData.js le will look like,

01. $(document).ready(function() {
02. loadItems();
03. });
04.
05.
06. function loadItems() {
07. var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
08. var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('EmployeeInfo')/ite
$select=Title,Position,Office,Age,Joining_x0020_date";
09. $.ajax({
10. url: oDataUrl,
11. type: "GET",
12. dataType: "json",
13. headers: {
14. "accept": "application/json;odata=verbose"
15. },
16. success: mySuccHandler,
17. error: myErrHandler
18. });
19. }
20.
21. function mySuccHandler(data) {
22. try {
23.
24. $('#table_id').DataTable({
25.
https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/ 5/13
8/20/2020 Using jQuery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages

26. "aaData": data.d.results,


27. "aoColumns": [
28. {
29. LEARN: React Virtual Conference
"mData": "Title"
30. },
C# Corner vincenttacda
31. {
32. "mData": "Position"
Post Ask
33. },
34. {
35. "mData": "Office" Question
36. },
37. {
38. "mData": "Age"
39. },
40. {
41. "mData": "Joining_x0020_date"
42. }
43. ]
44. });
45. } catch (e) {
46. alert(e.message);
47. }
48. }
49.
50. function myErrHandler(data, errMessage) {
51. alert("Error: " + errMessage);
52. }

Step 5

Copy both the les [html and JavaScript] to SharePoint SiteAssets Library.

Create a Webpart Page (Named DataTable) and store it in the pages or the site pages library.

Add a content editor to DataTable Page. Now, give HTML le reference to the content editor into
Content Editor.

Click OK and save the page


 
Output UI

https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/ 6/13
8/20/2020 Using jQuery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages

LEARN: React Virtual Conference

C# Corner vincenttacda

Post Ask

Question

 
Real-Time Search, Paging, Sorting, View Functionality [In-built DataTable functionality - NO
CODE]

I hope this article was helpful in getting started with the jQuery DataTable plugin. Please share
your valuable suggestions and feedback. 

Display SharePoint 2013 List data jQuery jQuery DataTable SharePoint

SharePoint Site Pages

Brought to you by: Embed analytics and dashboards right inside your app with a JS SDK. Free Demo.

Next Recommended Article


Using jQuery DataTable In SharePoint 2013

OUR BOOKS

https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/ 7/13
8/20/2020 Using jQuery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages

LEARN: React Virtual Conference

C# Corner vincenttacda

Post Ask

Question

Guest User

67k

5 11

Type your comment here and press Enter Key (Minimum 10 characters)

Follow Comments

It worked great for me. I can able to view the data. But It shows only 100 rows and link is not
available. Kindly suggest
Karthick N Jan 29, 2020
1933 15 0 0 0 Reply

How to show a lookup eld?


Sam Timothy Dec 23, 2019
1913 35 0 0 0 Reply

I only have the html loaded (column headers). Do I need to upload datatables.min and so on to site
assets. I have the get data js le linked correctly.
Sarmad Yousif Oct 08, 2019
1854 94 676 0 1 Reply

You can use datatable link from https://datatables.net/


Karthick N Jan 29, 2020
1933 15 0 0

How to add these buttons : copy, excel, pdf. I am getting syntax error if i follow the syntax which is
given on datatables.net website, please help
Ullas Anand Apr 25, 2019
1944 4 0 0 0 Reply

https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/ 8/13
8/20/2020 Using jQuery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages

Can you please suggest how to format the date eld for the same code if it is returning the deta eld
data as 2015-09-30T18:30:00Z. I want this in dd-mm-yyyy format
Anish Gupta Mar 25, 2019
LEARN: React Virtual Conference
1912 36 0 0 0 Reply

C# Corner vincenttacda
Awesome job! Is there some option for select multiple lines enabling check boxes as rst column?
Eduardo Araujo Post Ask Dec 17, 2018
1936 12 0 0 0 Reply
Question
Thanks Akshat. What would you do if items more than 5000? Regular user (not admin) will get
standart threshold retrieving 5000 items...
Siskoglaz Siskoglaz Aug 08, 2018
1942 6 0 0 0 Reply

Great solution! What would be the syntax for the use of "Use $top=5000 if items more than 100"?
Where would I place that and how would it look?
Bryan Waldrop Jun 13, 2018
1943 5 0 0 2 Reply

Thanks! By default SharePoint REST API fetches only top 100 items from the list.So to get all
the items from the list where items are more than 100 use syntax $top=5000 - fetches top
5000 items from the list (i.e. As SharePoint List View Threshold Limit = 5000 so our query
will return all list items) [Syntax : var oDataUrl = siteUrl +
"/_api/web/lists/getbytitle('EmployeeInfo')/items?
$select=Title,Position,O ce,Age,Joining_x0020_date&$top=5000"; //append $top=5000 to
existing API Data URL ]
Guest User Jun 17, 2018
Tech Writer 127 67k 1

Excellent thank you! And what form would an additional lter take that limited the table
data loaded to the user login, assuming there was a matching data in one of the table
columns?
Bryan Waldrop Jun 25, 2018
1943 5 0 0

https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/ 9/13
8/20/2020 Using jQuery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages

LEARN: React Virtual Conference

C# Corner vincenttacda

Post Ask

Question

FEATURED ARTICLES

Search, Sort And Group By In PowerApps Gallery Control

Microsoft Azure Well-Architected Framework

Azure Event Hub Implementation Using .Net Core Console App

Create A Storage Bucket In Google Cloud Platform

What This Community Means To Me


View All

https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/ 10/13
8/20/2020 Using jQuery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages

LEARN: React Virtual Conference

C# Corner vincenttacda

Post Ask

Question

TRENDING UP

01 Develop A Web Project With Authentication Using MEAN Stack

02 Design And Implement A Graph Database In Azure Cosmos DB

03 Create User Login And Registration Using Web API And React Hooks

04 How To Use Ag-Grid In ReactJS

05 Installing VS Code and Dot Net Core SDK on Latest Ubuntu 20.04(linux) 2020

06 Jump Statements Simpli ed With Flow Chart

07 How to Install Ubuntu 20.04 LTS on VirtualBox in Windows 10 Operating System (2020)

08 Java 8 - Optional Class

09 Installing Nodejs and Angular CLI on Ubuntu 20.04 (2020)

10 Java 8 - Stream API


View All
https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/ 11/13
8/20/2020 Using jQuery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages

LEARN: React Virtual Conference

C# Corner vincenttacda

Post Ask

Question

https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/ 12/13
8/20/2020 Using jQuery DataTable To Display SharePoint 2013 List Data On SharePoint Site Pages

LEARN: React Virtual Conference

C# Corner vincenttacda

Post Ask

Question

About Us Contact Us Privacy Policy Terms Media Kit Sitemap Report a Bug FAQ Partners

C# Tutorials Common Interview Questions Stories Consultants Ideas Certi cations


©2020 C# Corner. All contents are copyright of their authors.

https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/ 13/13

You might also like