Display SharePoint List Or Library Items Using DataTable JS

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!