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:
--------------------------
