SharePoint 2013 - Showing List Data in Jquery Datatable With Advanced Feature PDF

8/20/2020 SharePoint 2013 - Showing List Data In jQuery Datatable With Advanced Feature
Tune in FREE to the React Virtual Conference Sep. 11 at 10am ET x
LEARN: React Vir

SharePoint 2013 - Showing List Data In jQuery vincenttacda
C# Corner
Datatable With Advanced Feature Post Ask
Sagar Pardeshi Updated date Apr 18, 2019 Question 14.5k 2 4
MAGGI®
OPEN
Mabilis na sisig recipe
Download Free .NET & JAVA Files API

Try Free File Format APIs for Word/Excel/PDF
JQueryDataTable.zip
jQuery DataTable is an excellent plugin tool built on jQuery JavaScript library to build an HTML
table with a lot of advanced interaction controls, like Pagination, Multi-column Filtering, Multi-
column Ordering, Export to Excel, Hyperlinking, and Searching all data table content, etc.
Scenario
Users can’t lter a list item of particular column value or not showing the particular item details. A
lot of data in the list is showing in the pagination format for fast rendering the page with data.
Objective
We overcome the limitation of the SharePoint list view using jQuery table along with advanced
features like Hyperlink, pagination, Multi-column Filtering, Multi-column ordering and Search. We
meet the user's expectation to follow the below procedure. Now, we move to the functionality
part that suggests we need to follow CDN to get the required JS and CSS les that are required to
be used in our functionality.
jquery.min.js
jquery.dataTables.min.js
jquery.dataTables.min.css
dataTables.jqueryui.min.css
We use the following JS for Multi-Column Filtering functionality.
lterDropDown.js
https://www.c-sharpcorner.com/article/sharepoint-2013-showing-list-data-in-jquery-datatable-with-advanced-feature/ 1/12
For this, we need two les - one is an HTML le to render the data and another one is a JS le to
get the data from SharePoint list and map the data table plug-in methods.
LEARN: React Vir
C# Corner vincenttacda
Post Ask
Question
Create the HTML le
01. <html xmlns="http://www.w3.org/1999/xhtml">

02. <head runat="server">
03. <title></title>
04. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/
05. <script src="https://code.jquery.com/jquery-
3.3.1.js" type="text/javascript"></script>
06. <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/j
</script>
07. <script type="text/javascript" src="https://cdn.datatables.net/buttons/1
</script>
08. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/
</script>
</script>
11. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/li
</script>
</script>
13. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigi
14. <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/data
15. <script src="https://pointerone.sharepoint.com/sites/SPFXDemo/SiteAssets
</script>
16.
17. </head>
18. <body>
19. LEARN:
<table React Vir
id="table_id" class="display" role="grid" width="100%" cellspacin
20. <thead>
21. <tr> C# Corner vincenttacda
22. <th>Employee Name</th>
Post Ask
23. <th>Location</th>
24. <th>Designation</th>
25. </tr> Question
26. </thead>
27. </table>
28. </body>
29. </html>
Create a document library (CustomLibrary) and Custom le.txt le.
In the above example, the lters are loaded before the data is bound to HTML. As a result, the
lters appear empty or do not appear itself. For avoiding this issue, we are writing data (list items
in JSON format) from the list on Page load to a le (Custom le.txt) in the document library
(CustomLibrary) and pass this same list to the datatables on page load so that the data is
available to bind for lters.
For List Items More than 5000

Create rest service url if item count is above 5000 then we split calling with 1000 item per call
top=1000 for better performance. Otherwise we call as usual 5000 items top=5000,

LEARN: React Vir
Post Ask
Question
Step 1
From this page, select Site Actions | Edit Page.
Edit the page, go to the "Insert" tab in the ribbon and click the "Web Part" option. In the Web
Parts picker area, go to the "Media and Content" category, select the Script Editor Web Part, and
press the "Add" button.
Step 2
Once the Web Part is inserted into the page, you will see an "EDIT SNIPPET" link; click it. You can
insert HTML and/or JavaScript, as shown below.
01. <script type="text/javascript">

02. var items = "";
03. var itemcollection = "";
04. var TotalItemCount = 0;
05. SP.SOD.executeOrDelayUntilScriptLoaded(updateFile, 'SP.js');
06. //Step 1. get total item count of threshold exceed list.
07. function GetItemCount(siteurl, ListName) {
08. var ItemCount = '';
09. $.ajax({
10. url: siteurl + "/_api/web/lists/GetByTitle('" + ListName + "')/I
11. method: "GET",
12. async: false,
13. headers: { "Accept": "application/json; odata=verbose" },
14. success: function (data) {
15. ItemCount = data.d.ItemCount;
16. },
17. error: function (data) {
18. console.log(data);
19. }
20. });
21. return ItemCount;
22. }
23. //Step 2. create rest service url if item count is above 5000 then we sp
24. function createRestUrl(siteurl, ItemCount, ListName) {
25.
26. if (ItemCount <= 5000) {
27. //Item count less than 5000 so we limit it as usual 5000
28. var listServiceUrl = siteurl + "/_api/web/lists/GetByTitle('" +

$select=Id,EmployeeName,Location,Designation&$top=5000";
29. } else {
30. LEARN: React Vir
//Item count more than 5000 so we split it in 1000 item per call
31. var listServiceUrl = siteurl + "/_api/web/lists/GetByTitle('" +
$select=Id,EmployeeName,Location,Designation&$top=1000"; C# Corner vincenttacda
32. }
Post Ask
33.
34. processList(listServiceUrl, ItemCount);
35. } Question
36.
37. //Step 3: Rest call to procerss each items of list
38. function processList(nextUrl, ItemCount) {
39.
40. var dfd = new $.Deferred();
41.
42. if (nextUrl == undefined) {
43. dfd.resolve();
44. return;
45. }
46.
47. //Step 4: Repetative call to getJSONDataFromUrl() to get Ajax Json o
48. getJSONDataFromUrl(nextUrl).done(function (listItems) {
49.
50. TotalItemCount = TotalItemCount + listItems.d.results.length;
51.
52. items = listItems.d.results;
53. var next = listItems.d.__next;
54.
55. $.when(processList(next, ItemCount)).done(function () {
56.
57. dfd.resolve();
58.
59. });
60. for (var i = 0; i <= items.length; i++) {
61. if (i == 0) {
62. itemcollection = itemcollection + '{"data": [[' + '"' +
63. }
64. else if ((items.length > i) && (i != 0)) {
65. if ((items.length > i) && (i != 0))
66. itemcollection = itemcollection + "
[" + '"' + items[i].EmployeeName + '",' + '"' + items[i].Location + '",' +
67. }
68. else if ((items.length == i) && (i != 0)) {
69. itemcollection = itemcollection.slice(0, -1) + "]}";
70. }
71. }
72.
73. });
74. }
75.
76. //Step 4: Repetative call to getJSONDataFromUrl() to get Ajax Json objec
77. function getJSONDataFromUrl(endpoint) {
78. return jQuery.ajax({
79. url: endpoint,
80. method: "GET",

81. async: false,
82. headers: {
83. LEARN: React Vir
"Accept": "application/json; odata=verbose",
84. "Content-Type": "application/json; odata=verbose"
85. } C# Corner vincenttacda
86. });
Post Ask
87. }
88.
89. function updateFile() { Question
90. var siteurl = _spPageContextInfo.webAbsoluteUrl;
91. var ItemCount = GetItemCount(siteurl, 'EmployeeInformation');
92. var clientContext;
93. var oWebsite;
94. var oList;
95. var fileCreateInfo;
96. var fileContent;
97. clientContext = new SP.ClientContext.get_current();
98. oWebsite = clientContext.get_web();
99. oList = oWebsite.get_lists().getByTitle("CustomLibrary");
100. fileCreateInfo = new SP.FileCreationInformation();
101. fileCreateInfo.set_url("Customfile.txt");
102. fileCreateInfo.set_content(new SP.Base64EncodedByteArray());
103. fileCreateInfo.set_overwrite(true);
104. createRestUrl(siteurl, ItemCount, 'EmployeeInformation');
105. //fileContent = JSON.stringify(items);
106. fileContent = itemcollection;
107. for (var i = 0; i < fileContent.length; i++) {
108. fileCreateInfo.get_content().append(fileContent.charCodeAt(i));
109. }
110. this.existingFile = oList.get_rootFolder().get_files().add(fileCreat
111. clientContext.load(this.existingFile);
112. clientContext.executeQueryAsync(Function.createDelegate(this, succes
113.
114. function successHandler() {
115. $('#table_id').DataTable({
116. // Definition of filter to display
117. ajax: siteurl + "/CustomLibrary/Customfile.txt",
118. dom: 'Bfrtip',
119. buttons: [
120. 'excel' //Export to excel
121. ],
122. "columnDefs": [{
123. "targets": 0,
124. "render": function (data, type, row) {//Hyper link to Co
125. if (type === "display") {
126. return "<a style=\"text-
decoration: none; border-
bottom: 1px solid #337ab7;\" href=\"https://pointerone.sharepoint.com/sites/
ID=" + encodeURIComponent(row[3]) + "\">" + data + "</a>";
127. }
128. return data;
129. }
130. }
131. ],
132. filterDropDown: { //Multi-column Filtering

133. columns: [
134. {
135. LEARN: React
idx:Vir0
136. },
137. {
138. idx: 1
Post Ask
139. },
140. {
141. idx: 2 Question
142. },
143. ],
144. bootstrap: true
145. }
146. });
147. }
148. function errorHandler() {
149. alert("error");
150. }
151. }
152. </script>
Final Output
Note
A special thanks to Erik Kalkoken for providing the etension for the jQuery plug-in DataTables
(Filter multi-column)
LEARN: React Vir
Datatable jQuery jQuery Datatable SharePoint SharePoint 2013
Post Ask
Showing List Data In jQuery Datatable
Question
Brought to you by: 65+ Blazor Native Components – Try them free. Learn More.
Next Recommended Article

Using jQuery DataTable To Display SharePoint 2013 List Data On SharePoint Site
Pages
OUR BOOKS
Sagar Pardeshi
I am a developer working on Microsoft Technologies for the past 9 years. I am very much
passionate about programming and my core skills are SharePoint, ASP.NET & C#,REACT,
Angular, JQuery, Javascript, REST. I am run... Read more
http://sharepointapp09.wordpress.com/
94 5.7m 4
4 2
Type your comment here and press Enter Key (Minimum 10 characters)
Follow Comments
Hi Sagar, this isn't working with threshold exceeded list. returns with warning - invalid JSON response.
please advise
Sunil Jogi May 16, 2020
LEARN: React Vir
1924 24 0 0 0 Reply
Good Article
Bhushan Band Post Ask Apr 19, 2019
1585 363 238.4k 1 0 Reply
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
LEARN: React Vir
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
LEARN: React Vir
Post Ask
Question
LEARN: React Vir
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.

SharePoint 2013 - Showing List Data in Jquery Datatable With Advanced Feature PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SharePoint 2013 - Showing List Data in Jquery Datatable With Advanced Feature PDF

Uploaded by

Copyright:

Available Formats

8/20/2020 SharePoint 2013 - Showing List Data In jQuery Datatable With Advanced Feature

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

LEARN: React Vir

Sagar Pardeshi Updated date Apr 18, 2019 Question 14.5k 2 4

Download Free .NET & JAVA Files API

We use the following JS for Multi-Column Filtering functionality.

Create the HTML le

01. <html xmlns="http://www.w3.org/1999/xhtml">

Create a document library (CustomLibrary) and Custom le.txt le.

For List Items More than 5000

LEARN: React Vir

From this page, select Site Actions | Edit Page.

01. <script type="text/javascript">

28. var listServiceUrl = siteurl + "/_api/web/lists/GetByTitle('" +

80. method: "GET",

132. filterDropDown: { //Multi-column Filtering

Next Recommended Article

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 Vir

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 Vir

LEARN: React Vir

C# Tutorials Common Interview Questions Stories Consultants Ideas Certi cations

You might also like