In this article, we are going to build an application to display SharePoint List or Library items using DataTable JS.
Application Demo [Gif Format]
![Display SharePoint List or Library items using DataTable JS💡]()
Introduction
DataTables JS, advanced interaction controls to your HTML tables is free, open-source software that you can download and use for whatever purpose you wish, on any and as many sites you want.
Let's get started.
The Application
As I displayed the demo GIF, based on the user confirmation in the alert box DataTable is generated.
Step 1 - Building the UI
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../SiteAssets/style.css">
</head>
<body>
<div id="tableDiv">
<p id="toDisplay"></p>
<table id="EmployeeListID">
</table>
</div>
</body>
</html>
Step 2 - The CDN files
Here, I'm referring to Bootstrap 5, for more details refer to https://datatables.net/download/
<link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
Step 3 - Onload Event
Call the function using the onload event attribute in the <script> tag. Like below,
<script src="../SiteAssets/script.js" onload="getUsingRest()"></script>
As the function name says, data is loaded using the REST API Get method.
Alternative Method: Load data using Fetch API (to demonstrate fetch API to get items from SharePoint List/Library).
To know the basics of the fetch() method refer to my other post here.
Step 4 - The GET Method
Define the query URL for List and Library.
Start with the confirm alert, which prompts the user to select OK/Cancel, which returns true for Ok and false for cancel.
var queryURL = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('EmployeesList')/items";
var queryURLLib = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('EmployeeDocuments')/items?$select=FileLeafRef,FileRef,Created,Author/ID,Author/Title&$expand=Author/ID,Author/Title";
function getUsingRest() {
var confirmVal = confirm(`Select Ok to display "Document Library"\n\nSelect Cancel to display "List"`);
if(confirmVal === true){
var getURL = queryURLLib;
var toDisplay = 'Document Library';
} else{
var getURL = queryURL;
var toDisplay = 'List';
}
}
![Display SharePoint List or Library items using DataTable JS💡]()
In the success function, call fnDisplayDataTable() method.
function getUsingRest() {
var confirmVal = confirm(`Select Ok to display "Document Library"\n\nSelect Cancel to display "List"`);
if(confirmVal === true){
var getURL = queryURLLib;
var toDisplay = 'Document Library';
} else{
var getURL = queryURL;
var toDisplay = 'List';
}
$.ajax({
url: getURL,
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
async: false,
success: function (data) {
let items = data.d.results;
fnDisplayDataTable(items, toDisplay);// Datatable JS
},
error: function (error) {
console.log(error);
}
});
}
Step 4(Alternative) - Using Fetch API
To know the basics of the fetch() method refer to my other post here.
var queryURL = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('EmployeesList')/items";
var queryURLLib = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('EmployeeDocuments')/items?$select=FileLeafRef,FileRef,Created,Author/ID,Author/Title&$expand=Author/ID,Author/Title";
function getUsingFetch() {
//Confirm alert goes here
let payload = {
method: 'GET',
headers: {
"Accept": "application/json; odata=verbose"
},
credentials: 'same-origin'
}
fetch(queryURL, payload)
.then(response => response.json())
.then((data) => {
let items = data.d.results;
fnDisplayDataTable(items, 'List');
})
}
Step 5 - DataTable JS
Here I'm gonna create an array of objects for the columns with the data and title.
Where, data - List/Library internal name and title - Display Name
Sample syntax,
var datatableColumns = [
{data: "Title", title: "Employee Full Name"},
{data: "Designation", title: "Designation"}
];
To format the column based on the requirement use render, a function returns with the formatted style.
Here to display the Author name which returns an array, the profile image, and the download link image I have used the render callback function.
function fnDisplayDataTable(tableData, type) {
if(type === 'List'){
var datatableColumns = [
{title: "S. No", className: 'dt-body-center'},
{data: "Title", title: "Employee Full Name"},
{data: "Designation", title: "Designation"},
{data: "ProfileImage", title: "Profile Image",
className: 'dt-body-center',
render: function (data, type, row) {
return formatProfileImage(data)
}
}
];
} else{
var datatableColumns = [
{title: "S. No", className: 'dt-body-center'},
{data: "FileLeafRef", title: "Document"},
{data: "Author", title: "Modified By",
className: 'dt-body-center',
render: function (data, type, row) {
return formatUser(data)
}},
{data: "FileRef", title: "Download",
className: 'dt-body-center',
render: function (data, type, row) {
return formatView(data)
}
}
];
}
$('#EmployeeListID').DataTable({
"language": {
"emptyTable": "No Records available"
},
"autoWidth": false,
data: tableData,
columns: datatableColumns,
"columnDefs": [{
"render": function (data, type, full, meta) {
tableData[meta.row].id = meta.row + 1; // adds id to dataset
return meta.row + 1; // adds id to serial no
},
"targets": 0
}]
});
$("#toDisplay").text(type);
$("#EmployeeListID th").css({
"text-align": "center",
"background-color": "#476f96",
"color": "white",
"padding": "5px",
"font-weight": "400"});
}
function formatProfileImage(data) {
return '<img src="' + data + '" style="width:50px">';
}
function formatView(data){
return '<a href="'+data+'"><img src="../SiteAssets/download.png"></a>'
}
function formatUser(data){
return '<span>'+data.Title+'</span>'
}
Screenshots
![Display SharePoint List or Library items using DataTable JS💡]()
![Display SharePoint List or Library items using DataTable JS💡]()
Conclusion
And that's it, a generic code for any user requirement is here.
Refer to my GitHub repository for full code.
Happy learning!