SharePoint Hosting – Display SharePoint List Or Library Items Using DataTable JS

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

Step 2 – The CDN files

Here, I’m referring to Bootstrap 5

Step 3 – Onload Event

Call the function using the onload event attribute in the <script> tag. Like below,

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).

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.

In the success function, call fnDisplayDataTable() method.

Step 4(Alternative) – Using Fetch API

To know the basics of the fetch() method refer to my other post here.

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,

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.