Display SharePoint List Data in JQuery
DataTable using JQueryUI and Bootstrap 3
Step 1:
-------
First Create an Custom List and add sample data as shown below.
Step 2:
-------
Open an Notepad file a and add below script and save as '.html' file and upload into SharePoint Site Assets Library. (Update your list name in below script).
1.Display SharePoint List Data in JQuery DataTable using JQueryUI
---------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.jqueryui.min.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.jqueryui.min.css">
<script type="text/javascript">
$(document).ready(function () {
var RestUrl = "../_vti_bin/listdata.svc/CustomList1";
$.ajax({
url: RestUrl,
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function (data) {
if (data.d.results.length >
0) {
$('#divCustomList1').append(getJSONData(data.d.results));
var oTable = $('#tblCustomList').DataTable({
});
} else {
$('#divCustomList1').append("<span>No List Data Found.</span>");
}
},
error: function (data) {
$('#divCustomList1').append("<span>Error Retreiving List Data. Error :
" + JSON.stringify(data) + "</span>");
}
});
function getJSONData(objArray) {
var tableContent = '<table
id="tblCustomList" class="display"
cellspacing="0" width="100%">'
+ '<thead>'
+ '<tr>'
+ '<th>ID</th>'
+ '<th>Title</th>'
+ '</tr>'
+ '</thead>'
+
'<tbody>';
for (var i = 0; i < objArray.length; i++) {
tableContent += '<tr>';
tableContent += '<td>' +
objArray[i].Id + '</td>';
tableContent += '<td>' +
objArray[i].Title + '</td>';
tableContent += '</tr>';
}
+'</tbody>';
return tableContent;
}
});
</script>
</head>
<body>
<div id="div1">
<table style="width: 100%;">
<tr>
<td>
<div id="divCustomList1" style="width: 100%"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
2.Display SharePoint List Data In JQuery
DataTable using Bootstrap 3
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap4.min.css">
<script type="text/javascript">
$(document).ready(function () {
var RestUrl = "../_vti_bin/listdata.svc/CustomList1";
$.ajax({
url: RestUrl,
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function (data) {
if (data.d.results.length >
0) {
$('#divCustomList1').append(getJSONData(data.d.results));
var oTable = $('#tblCustomList').DataTable({
});
} else {
$('#divCustomList1').append("<span>No List Data Found.</span>");
}
},
error: function (data) {
$('#divCustomList1').append("<span>Error Retreiving List Data. Error :
" + JSON.stringify(data) + "</span>");
}
});
function getJSONData(objArray) {
var tableContent = '<table
id="tblCustomList" class="table table-striped
table-bordered" cellspacing="0" width="100%"
cellspacing="0" width="100%">'
+ '<thead>'
+ '<tr>'
+ '<th>ID</th>'
+ '<th>Title</th>'
+
'</tr>'
+ '</thead>'
+
'<tbody>';
for (var i = 0; i < objArray.length; i++) {
tableContent += '<tr>';
tableContent += '<td>' +
objArray[i].Id + '</td>';
tableContent += '<td>' + objArray[i].Title + '</td>';
tableContent += '</tr>';
}
+'</tbody>';
return tableContent;
}
});
</script>
</head>
<body>
<div id="div1">
<table style="width: 100%;">
<tr>
<td>
<div id="divCustomList1" style="width: 100%"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
Step 3:
-------
Add an Content Editor WebPart to page and give script reference from Site Assets Library.
DataTable Using JQueryUI:
--------------------------
DataTable using Bootstrap:
--------------------------
525E9643
ReplyDeleteHendek
Selçuk
Kuşadası
Bucak
Gölhisar
Karesi
Erdek
Bitez
Kemalpaşa
The article provides a practical approach for displaying SharePoint custom list data in a JQuery DataTable, starting with list creation and sample data before moving into the HTML and JavaScript implementation. Using the SharePoint REST-style endpoint with an AJAX GET request makes the example easy to follow for retrieving list records dynamically.
DeleteThe integration of JQuery DataTable with JQuery UI is useful for turning the returned SharePoint data into a structured and interactive table. Understanding how the AJAX response is handled through data.d.results is particularly relevant when working with Javascript Online Course concepts such as DOM manipulation, event handling, and asynchronous data retrieval.
The example also demonstrates how external JavaScript and CSS resources are included for DataTables and JQuery UI before initializing the table after the SharePoint data has been loaded. This combination provides a practical illustration of how Javascript Online Training can cover real-world integration scenarios involving APIs, AJAX requests, and client-side tabular data presentation.
DeleteFA65B9FC
ReplyDeleteİlkadım
Bodrum
Selçuk
Kaynarca
Ömerli
Ilıca
Osmangazi
Konak
Karasu