How to display SharePoint list data in an HTML table using JavaScript

This JSOM SharePoint 2013 example explains, how to display SharePoint list data in a tabular format (HTML table) in SharePoint Online by using JSOM (JavaScript Object Model).

Here we will discuss how to display SharePoint list data in an HTML table in a tabular format using jsom and jQuery in SharePoint Online or SharePoint 2013/2016.

Display SharePoint list data in an HTML table using JavaScript

I have a SharePoint list which has few columns like below:

  • User Name (single line text )
  • Password(single line text)
  • Address (Multiline textbox)
  • Gender (Choice)
  • Country (Choice / Dropdown list)
  • Submission Date (Date and Time)

The SharePoint list has some items like shown in the below screenshot-

display sharepoint list data in html table using javascript
display SharePoint list data in HTML table using javascript

Now we have to display these SharePoint List items, in a tabular format using HTML and JavaScript (jsom).

In SharePoint Online or SharePoint 2013/2010, you can use the jsom code inside a content editor web part or a script editor web part.

Another way you can use jsom SharePoint code is inside a SharePoint hosted Apps or in SharePoint Hosted Add-ins.

First will show you how can we use the code inside a content editor web part. The same way you can use the code inside the script editor web part.

Here, we will create the HTML file, JS file and CSS file.

HTML File

The HTML code looks like below:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/Mytable.js"></script>
<link rel="stylesheet" href="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/Mytablestyle.css">
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p id="ptitle"></p>
</body>
</html>

In this HTML Code, I have given the JS path link and as well as the CSS path link. Then add a paragraph tag <P> with ID attribute. Here i have given (id=”ptitle”).

JavaScript (.js) file

Below is the code which contains the JSOM (JavaScript object model) code to retrieve and display SharePoint list items in an HTML table using JavaScript.

$(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('CmpanyInfoList');
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 mytable = "<table class=\"alternate\"><tr>" +
"<th>Title</th>" +
"<th>Address</th>" +
"<th>Gender</th>" +
"<th>Country</th>" +
"<th>EmailID</th>" +
"<th>SubmissionDate</th></tr>";
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
mytable += "<tr><td>" + oListItem.get_item('Title') + "</td><td>" + oListItem.get_item('Address') + "</td><td>" + oListItem.get_item('Gender') + "</td><td>" + oListItem.get_item('Country') + "</td><td>" + oListItem.get_item('EmailID') + "</td><td>" + oListItem.get_item('SubmissionDate') + "</td></tr>";}
mytable += "</table>";
$("#ptitle").html(mytable);
}
function onQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}

Here in this js code, I have created the table dynamically and in the last I have binded the variable with the ID by using below code-

$("#ptitle").html(mytable);

.CSS File

Here, I have added the .css file to add some styling into the HTML table.

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.alternate tr:nth-child(2n) {
background-color: silver;
}
.alternate tr {
background-color: white;
}
.alternate tr:nth-child(2n):hover, .alternate tr:hover {
background-color: grey;
}

Then upload these three files(Mytable.html File, Mytable.JS File, Mytablestyle.CSS File) in the “Site Assets” document library in SharePoint Online/2013/2016.

Then create a web part page and Edit the page and then click on Add a web part link, then it will open the Web part categories in the ribbon. From the web part categories, select Media and Content and then from the Parts select Content Editor web part.

By clicking on the “Edit web part”, we can give the HTML File path in the content editor web part. Once you save the page, the Html file will be displayed on that Web Part Page like the below screenshot-

display sharepoint list data in jquery data table
display SharePoint list data in a jquery data table

Display SharePoint List Data in a Tabular format in SharePoint Hosted Apps or Add-ins

In the above approach, we are injecting the code inside the script editor web part or content editor web part. Now we will see how we can do this in a SharePoint hosted Add-in or Apps.

I have the below article to Bind SharePoint Online Host Web List Data to Dropdownlist in SharePoint Hosted Add-in.

If you are also new to SharePoint hosted Apps or Add-ins you can check out a video tutorial on this.

You can follow the article and you can replace the js code inside the App.js file and the HTML content you can put in the Default.aspx page and the CSS content you can put inside the .css file in the SharePoint hosted App or Add-ins.

Read some SharePoint jsom tutorials:

Conclusion

In this SharePoint JSOM tutorial, we discussed how to display the List Item in a tabular format in SharePoint Online by using JSOM (JavaScript Object Model).

We saw how to display list data in tabular format using jsom in SharePoint using script editor web part or content editor web part and in SharePoint hosted apps or add-ins.

>