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
8/20/2020 SharePoint 2013 - Showing List Data In jQuery Datatable With Advanced Feature
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/
09. <script type="text/javascript" src="https://cdn.datatables.net/buttons/1
</script>
10. <script type="text/javascript" src="https://cdn.datatables.net/buttons/1
</script>
11. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/li
</script>
12. <script type="text/javascript" src="https://cdn.datatables.net/buttons/1
</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>
https://www.c-sharpcorner.com/article/sharepoint-2013-showing-list-data-in-jquery-datatable-with-advanced-feature/ 2/12
8/20/2020 SharePoint 2013 - Showing List Data In jQuery Datatable With Advanced Feature
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,
https://www.c-sharpcorner.com/article/sharepoint-2013-showing-list-data-in-jquery-datatable-with-advanced-feature/ 3/12
8/20/2020 SharePoint 2013 - Showing List Data In jQuery Datatable With Advanced Feature
LEARN: React Vir
C# Corner vincenttacda
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
https://www.c-sharpcorner.com/article/sharepoint-2013-showing-list-data-in-jquery-datatable-with-advanced-feature/ 4/12
8/20/2020 SharePoint 2013 - Showing List Data In jQuery Datatable With Advanced Feature
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,
https://www.c-sharpcorner.com/article/sharepoint-2013-showing-list-data-in-jquery-datatable-with-advanced-feature/ 5/12
8/20/2020 SharePoint 2013 - Showing List Data In jQuery Datatable With Advanced Feature
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. ],
https://www.c-sharpcorner.com/article/sharepoint-2013-showing-list-data-in-jquery-datatable-with-advanced-feature/ 6/12
8/20/2020 SharePoint 2013 - Showing List Data In jQuery Datatable With Advanced Feature
132. filterDropDown: { //Multi-column Filtering
133. columns: [
134. {
135. LEARN: React
idx:Vir0
136. },
C# Corner vincenttacda
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
https://www.c-sharpcorner.com/article/sharepoint-2013-showing-list-data-in-jquery-datatable-with-advanced-feature/ 7/12
8/20/2020 SharePoint 2013 - Showing List Data In jQuery Datatable With Advanced Feature
Note
A special thanks to Erik Kalkoken for providing the etension for the jQuery plug-in DataTables
(Filter multi-column)
LEARN: React Vir
C# Corner vincenttacda
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
https://www.c-sharpcorner.com/article/sharepoint-2013-showing-list-data-in-jquery-datatable-with-advanced-feature/ 8/12
8/20/2020 SharePoint 2013 - Showing List Data In jQuery Datatable With Advanced Feature
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
C# Corner vincenttacda
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
https://www.c-sharpcorner.com/article/sharepoint-2013-showing-list-data-in-jquery-datatable-with-advanced-feature/ 9/12
8/20/2020 SharePoint 2013 - Showing List Data In jQuery Datatable With Advanced Feature
View All
LEARN: React Vir
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
https://www.c-sharpcorner.com/article/sharepoint-2013-showing-list-data-in-jquery-datatable-with-advanced-feature/ 10/12
8/20/2020 SharePoint 2013 - Showing List Data In jQuery Datatable With Advanced Feature
View All
LEARN: React Vir
C# Corner vincenttacda
Post Ask
Question
https://www.c-sharpcorner.com/article/sharepoint-2013-showing-list-data-in-jquery-datatable-with-advanced-feature/ 11/12
8/20/2020 SharePoint 2013 - Showing List Data In jQuery Datatable With Advanced Feature
LEARN: React Vir
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/sharepoint-2013-showing-list-data-in-jquery-datatable-with-advanced-feature/ 12/12
