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

SharePoint Online training courses

This JSOM SharePoint 2013 example explains, how to display SharePoint list data in HTML table using JavaScript. We will use the JSOM code to display SharePoint list items in HTML table.

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.

We will also, see how to retrieve list items using JavaScript SharePoint Online using SharePoint hosted apps or add-ins.

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.

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

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

HTML File

The HTML code to display SharePoint list items using JavaScript 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 for get list items using javascript SharePoint 2013/Online

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

This is how we can display SharePoint list data in HTML table using javascript. The same code we can use to display SharePoint list in HTML page in SharePoint 2013/2016/2019 also.

Display SharePoint list items in HTML table using SharePoint Hosted Apps

Now, we will see another example on, how to display SharePoint list items using JavaScript in a SharePoint hosted apps or add-ins.

The example is about, how to display SharePoint list items in HTML table using jQuery and jsom in SharePoint Online.

Here I have a SharePoint Online list which looks like below:

Display SharePoint List items in HTML Table using JSOM
Display SharePoint List items in HTML Table using JSOM

Display SharePoint List items in HTML Table using JSOM in SharePoint Hosted App

Next, Open your Visual Studio, Create a SharePoint Add-In. For creating this, go to the File menu, click on the new item, next click on Project item. It displays a new project.

Here, in the left side panel, go to the Office/SharePoint tab, here you select Add-in.

Now it displays the list of Add-In’s, here you select SharePoint Add-In. Now enter your project name and location. Then click on OK.

Next, it will display the new SharePoint Add-In window. Here select your SharePoint host URL (Choose your SharePoint developer site URL) and select SharePoint Hosted and click Next. Now it will ask for your Microsoft Account details. Enter your username and password and click on sign-in.

Here you select SharePoint Online as shown below and click on Finish.

Go to aspx page. Add this code to this page.

<asp:ContentContentPlaceHolderID="PlaceHolderMain"runat="server">
<divid="empdata">
<%–<p id="message">
<!– The following content will be replaced with the user name when you run the app – see App.js –>
initializing…
</p>–%>
</div>
</asp:Content>

Here just add id=”empdate” in div tag because for displaying we bind data to this tag.

'use strict';

ExecuteOrDelayUntilScriptLoaded(RetrieveList, "sp.js");

var listItems;
functionRetrieveList() {
var hostUrl = decodeURIComponent(getURLParameters("SPHostUrl"));
var clientContext = newSP.ClientContext.get_current();
var hostcontext = newSP.AppContextSite(clientContext, hostUrl);
var web = hostcontext.get_web();
var list = web.get_lists().getByTitle(‘Employee’);
var cmlquery = newSP.CamlQuery();
listItems = list.getItems(cmlquery);
load(listItems);
executeQueryAsync(onQuerySucceeded, onQueryFailed);
}

functiononQuerySucceeded() {
var listItemEnumerator = listItems.getEnumerator();
var displaytable = "<table border=\"1\"><tr>" +
"<th>Title</th>" +
"<th>Country</th>" +
"<th>State</th></tr>";

while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
displaytable += "<tr><td>" + oListItem.get_item(‘Title’) + "</td><td>"
+ oListItem.get_item(‘Country’).get_lookupValue() + "</td><td>"
+ oListItem.get_item(‘State’).get_lookupValue() + "</td></tr>";
}
displaytable += "</table>"
$("#empdata").html(displaytable)
}

functiononQueryFailed(sender, args) {
alert(‘Error: ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}

functiongetURLParameters(param) {
var params = document.URL.split(‘?’)[1].split(‘&’);
var strParams = ";
for (vari = 0; i<params.length; i = i + 1) {
var singleParam = params[i].split(‘=’);
if (singleParam[0] == param) {
returnsingleParam[1];
}
}
}

Go to appmanifest.xml file and open it. Then go to the permission here you select scope: site collection and permission: Full Control.

Display SharePoint List items in HTML Table using JSOM in SharePoint Hosted App
Display SharePoint List items in HTML Table using JSOM in SharePoint Hosted App

Go to your solution explorer, select your project name then right-click on it and click on deploy option.

Here is your output.

Display SharePoint List items in HTML Table using JSOM in SharePoint Hosted App
Display SharePoint List items in HTML Table using JSOM in SharePoint Hosted App

This is how we can get list items using JavaScript SharePoint 2013 and display SharePoint list item in html table in a SharePoint hosted apps or add-ins.

You may like the following 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.

>