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
FA65B9FC
ReplyDeleteİlkadım
Bodrum
Selçuk
Kaynarca
Ömerli
Ilıca
Osmangazi
Konak
Karasu