Display SharePoint list data in HTML table using JavaScript

This tutorial explains, how to display sharepoint list data in html table using javascript. This code will work in SharePoint Online as well as SharePoint On-premise versions like SharePoint 2013/2016 or SharePoint 2019.

We will discuss how to display SharePoint list items in a tabular format on page load using JSOM (JavaScript Object Model).

Display SharePoint list data in HTML table using javascript

Here we have taken a SharePoint list with list name as “Facilitylist” which has few columns like below:

  • LaptopName
  • LaptopID
  • SubmissionDate
  • Department

And we have taken an HTML file with a <p> tag to display the data in tabular format and have used the JavaScript object model (jsom) to retrieve the items from the SharePoint list and to create the tabular structure.

The code you can add to a SharePoint page by using a script editor web part or content editor web part. The code will not work in modern SharePoint sites. To work with the modern SharePoint site, you have to use SharePoint Framework (SPFx) development model.

HTML code:

Here we have created an HTML file passing all the references like JQuery reference and file references.

<!DOCTYPE HTML>
<HTML>
<head>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Bihusdevelopment2/development5tabularview.js"></script>
</head>
<body id="body">
<p id="pid"></p>
</body>
</html>

JSOM to retrieve SharePoint list and list items

We can follow below code to retrieve the SharePoint list items:

var siteUrl = _spPageContextInfo.siteServerRelativeUrl ;
var collListItem
function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Facilitylist');

var camlQuery = new SP.CamlQuery();

collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}

Setting the tabular structure using JSOM

Here we will be creating the tabular structure to represent the list items in a tabular form.

Breaking down the code we can see, we have created a table row with table header before while loop starts as we are not going to repeat the headers multiple times. While loop is used to retrieve the list elements.

function onQuerySucceeded(sender, args) {

var listItemEnumerator = collListItem.getEnumerator();
var displaytable = "<table><tr>" +
"<th>LaptopName</th>" +
"<th>LaptopID</th>" +
"<th>submissionDate</th>" +
"<th>Department</th></tr>";

while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();

displaytable +="<tr><td>" + oListItem.get_item('LaptopName') +"</td><td>"
+ oListItem.get_item('LaptopID') + "</td><td>"
+ oListItem.get_item('submissionDate')+ "</td><td>"
+ oListItem.get_item('Department')+"</td><tr>";
}
displaytable+="</table>"

}

Binding the code under page load we can see the tabular structure created. We can add CSS to add look and feel to the table. Here we are displaying the table within a HTML <p> tag. Below is full code to represent SharePoint list items on Page load in a tabular format using JQuery.

$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
});

var siteUrl = _spPageContextInfo.siteServerRelativeUrl ;
var collListItem
function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Facilitylist');

var camlQuery = new SP.CamlQuery();

collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {

var listItemEnumerator = collListItem.getEnumerator();
var displaytable = "<table><tr>" +
"<th>LaptopName</th>" +
"<th>LaptopID</th>" +
"<th>submissionDate</th>" +
"<th>Department</th></tr>";

while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();

displaytable +="<tr><td>" + oListItem.get_item('LaptopName') +"</td><td>"
+ oListItem.get_item('LaptopID') + "</td><td>"
+ oListItem.get_item('submissionDate')+ "</td><td>"
+ oListItem.get_item('Department')+"</td><tr>";

}

displaytable+="</table>"

$("#pid").html(displaytable)
}

function onQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}

Once you save the code, you can see the output looks like below:

display sharepoint list data in html table using javascript

You may like following SharePoint jsom tutorials:

This SharePoint tutorial, we learned how to display SharePoint list data in html table using JavaScript.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

>