Display SharePoint List items in a data table using Rest API and jQuery

This SharePoint rest api tutorial explains, how to display SharePoint list data in a datatable using Rest API and jQuery in SharePoint Online or SharePoint 2013/2016.

Display SharePoint List items in a data table using Rest API

Here, I have a SharePoint Online list which has few columns like:

  • Title
  • Gender
  • ContactNumber
  • Department
  • Address

And the SharePoint list looks like below:

Display SharePoint List items in a data table using Rest API
Display SharePoint List items in a data table using Rest API

Now, we will see how to display these SharePoint list items in a data table using Rest API, HTML, jQuery, etc in a web part page in SharePoint.

Here I will use a content editor web part to add the code into the web part page in SharePoint. So here, I have added two separated file, one is the HTML file which contents the HTML code and the other one is a js file which contains our JavaScript and Rest API code.

Both the files I have uploaded to the SiteAssets library in the SharePoint Online site.

HTML Code:

<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://onlysharepoint2013.sharepoint.com/sites/SharePointSky/SiteAssets/RetriveListItemsRestAPI.js"></script>

<!–External js file to get data from SharePoint List –>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css">
</head>
<body>
<div>

<table id="Employee" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>EmpName</th>
<th>Gender</th>
<th>ContactNumber</th>
<th>Department</th>
<th>Address</th>
</tr>
</thead>
</table>
</div>
</body>
</html>

RetriveListItemsRestAPI.js Code

$(document).ready(function() {
GetItems();
});

function GetItems() {
var siteUrl = _spPageContextInfo.webAbsoluteUrl;
var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('MyCompanyEmployeeList')/items?$select=Title,Gender,ContactNumber,Department,Address";
$.ajax({
url: oDataUrl,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: OnSuccess,
error: OnFailure
});
}

function OnSuccess(data) {
try {
$('#Employee').DataTable({
"aaData": data.d.results,
"aoColumns": [
{
"mData": "Title"
},
{
"mData": "Gender"
},
{
"mData": "ContactNumber"
},
{
"mData": "Department"
},
{
"mData": "Address"
}
]
});
} catch (e) {
alert(e.message);
}
}

function OnFailure(data, errMessage) {
alert("Error: " + errMessage);
}

Then add a content editor web part to the web part page and give the HTML file reference like below:

display list items in datatable using rest api sharepoint
display list items in datatable using rest api sharepoint

Once you save the page, you can see the list data will appear in the datatable like below:

SharePoint online display list items in datatable using rest api
SharePoint online display list items in datatable using rest api

You may like following SharePoint Rest API tutorials:

Hope this SharePoint tutorial helps to display SharePoint list items in a datatable using Rest API and jQuery in SharePoint Online or SharePoint 2013/2016.

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

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

  • […] Display SharePoint List items in a data table using Rest API and jQuery […]

  • […] Display SharePoint List items in a data table using Rest API and jQuery […]

  • […] Display SharePoint List items in a data table using Rest API and jQuery […]

  • Sahira says:

    Hello, I’m so confused.

    How do the code know which list we want to display. I can’t see the link to the list.

    Thank you.

    • Bijay Kumar says:

      In the below line you can see the list name:
      var oDataUrl = siteUrl + “/_api/web/lists/getbytitle(‘MyCompanyEmployeeList’)/items?$select=Title,Gender,ContactNumber,Department,Address”;

      Here MyCompanyEmployeeList: Is my list name, you can change according to your list name.

  • Mohd Tahir says:

    Items is not filtering after 5000, Can you please assist me if I have more than 5000 items in SharePoint List.

  • >