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

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

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
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
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.
<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. 
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;
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. {
09. "mData": "Title"

10. },
11. {
12. LEARN: React Virtual Conference
"mData": "Position"
13. },
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.
26. "aaData": data.d.results,

27. "aoColumns": [
28. {
29. LEARN: React Virtual Conference
"mData": "Title"
30. },
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
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
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
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
1912 36 0 0 0 Reply
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
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
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
Post Ask
Question
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.

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

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

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

Hochgeladen von

Copyright:

Verfügbare Formate

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

Guest User Updated date Feb 17, 2018 67.1k

Download Free .NET & JAVA Files API

HTML le to render the data

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

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

01. <!DOCTYPE html>

01. function loadItems() {

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

Use $top=5000 if items more than 100.

01. function mySuccHandler(data) {

09. "mData": "Title"

01. function myErrHandler(data, errMessage) {

Our GetData.js le will look like,

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

Click OK and save the page

LEARN: React Virtual Conference

Display SharePoint 2013 List data jQuery jQuery DataTable SharePoint

SharePoint Site Pages

Next Recommended Article

LEARN: React Virtual Conference

How to show a lookup eld?

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

LEARN: React Virtual Conference

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

LEARN: React Virtual Conference

01 Develop A Web Project With Authentication Using MEAN Stack

02 Design And Implement A Graph Database In Azure Cosmos DB

04 How To Use Ag-Grid In ReactJS

06 Jump Statements Simpli ed With Flow Chart

08 Java 8 - Optional Class

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

10 Java 8 - Stream API

LEARN: React Virtual Conference

LEARN: React Virtual Conference

C# Tutorials Common Interview Questions Stories Consultants Ideas Certi cations

Das könnte Ihnen auch gefallen