How to display two tables in a single page using two REST APIs?
How to display two tables in a single page using two REST APIs?
venkatsai
Posts: 1Questions: 1Answers: 0
Hi Tech Experts! I'm using Data tables plugin to display Sharepoint list items in the table using Sharepoint REST API. So, I have two different APIs. I'm able to show the first rest api data in first table but unable to show the second rest api data in second table. I have mentioned two tables in html with two different ids and used them in js accordingly with jQuery selector.
Please rectify my mistakes if found in the below code.
file.js
$(document).ready(function () {
loadTableItems();
loadCountItems();
});
function loadTableItems() {
var oDataUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('abc')/items?$select=Title,Count,Modified,OData__x0075_hb9";
$.ajax({
url: oDataUrl,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: mySuccHandler,
error: myErrHandler
});
}
function mySuccHandler(data) {
try {
var dataTable = $('#table_id').DataTable();
if (dataTable != 'undefined') {
dataTable.destroy();
}
dataTable = $('#table_id').DataTable({
responsive: true,
"lengthChange": false,
paging: true,
bAutowidth: false,
columnDefs: [
{ className: "dt-head-center", "targets": [0, 1, 2, 3] },
],
"aaData": data.d.results,
"aoColumns": [{
"mData": "OData__x0075_hb9",
},
{
"mData": "Title", sWidth: '30%'
},
{
"mData": "Count", "sClass": "column-align"
},
{
"mData": "Modified", "sClass": "column-align",
"render": function (mData) {
var date = moment(mData);
return (date.format('ddd DD-MM-YYYY hh:mm A'));
}
}],
"dom": 'lBftipr',
buttons: [
{
extend: 'excelHtml5',
text: 'Export to Excel',
title: 'Analytics',
}]
});
}
catch (e) {
alert(e.message);
}
}
function myErrHandler(data, errCode, errMessage) {
alert("Error: " + errMessage);
}
function loadCountItems() {
var restUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('xyz')/items?$select=vmmm,zpdq,zlvx,t75f";
$.ajax({
url: restUrl,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: mySuccHandler,
error: myErrHandler
});
}
function mySuccHandler(data) {
try {
var countTable = $('#art_id').DataTable();
if (countTable != 'undefined') {
countTable.destroy();
}
countTable = $('#art_id').DataTable({
responsive: true,
"lengthChange": false,
paging: true,
bAutowidth: false,
"aaData": data.d.results,
"aoColumns": [{
"mData": "vmmm",
},
{
"mData": "zpdq",
},
{
"mData": "zlvx",
},
{
"mData": "t75f",
}
],
});
}
catch (e) {
alert(e.message);
}
}
function myErrHandler(data, errCode, errMessage) {
alert("Error: " + errMessage);
}
file.html
<body>
<div>
<table id="table_id" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Practice</th>
<th>Title</th>
<th>Visits</th>
<th>Last Visited</th>
</tr>
</thead>
</table>
</div>
<br>
<br>
<br>
<h3 style="text-align:left; color:rgb(0, 112, 173)">Artifacts per Practice</h3>
<br>
<div>
<table id="art_id" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Engagement</th>
<th>Process</th>
<th>Practice</th>
<th>Artifact Count</th>
</tr>
</thead>
</table>
</div>
</body>
This discussion has been closed.
Answers
Looks like you've named the functions the same, two lots of
mySuccHandlerand two lots ofmyErrHandler. Either define them within the function that makes the ajax call, to reduce the scope, or name them uniquely.Colin