0

Is there anyway of display more than one data table from different lists in the same page?

Instead I get the following error:

DataTables warning: table id=Employee - Cannot reinitialize DataTable.

Also tried using different table ID for each table.

<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>

<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>Title</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
</div>

<script>

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

function GetItems() {
var siteUrl = _spPageContextInfo.webAbsoluteUrl;
var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('DirectorList')/items?$select=Title,First_Names,Last_Name";
$.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": "First_Names"
},
{
"mData": "Last_Name"
}
]
});
} catch (e) {
alert(e.message);
}
}

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

</script>


</body>
</html>

1 Answer 1

0

Yes, it is possible to display more than one data tables on the same SharePoint page.

You have to provide the different ID for each table in your HTML and JS.

For Example:

Table 1 - showing employees from "DirectorList" list:

HTML:

<table id="Employee" class="display" cellspacing="0" width="100%">

JS:

$('#Employee').DataTable({
    "aaData": data.d.results,
    "aoColumns": [
        {
            "mData": "Title"
        },
        {
            "mData": "First_Names"
        },
        {
            "mData": "Last_Name"
        }
    ]
});

Table 2 - showing products from "Products" list (list & column names used are just for examples):

HTML:

<table id="Products" class="display" cellspacing="0" width="100%">

JS:

$('#Products').DataTable({
    "aaData": data.d.results,
    "aoColumns": [
        {
            "mData": "Title"
        },
        {
            "mData": "ProductName"
        },
        {
            "mData": "ProductCategory"
        }
    ]
});

Where Title, ProductName, ProductCategory, etc. are the internal names of your columns from SharePoint list.

You can get the internal name of your SharePoint list columns by following this article: How to find the Internal name of columns in SharePoint Online?

4
  • Tried using different table IDs but I get the error message: "Datatables warning: table id=Products. Cannot reinitialise DataTable".
    – Bra Tabs
    Aug 28, 2023 at 12:22
  • What is the error message? Did you try using different table IDs in both HTML and JS as given in above answer? Aug 28, 2023 at 12:29
  • I think you are re-initializing same table multiple times somehow. So, try adding "bDestroy": true or "destroy": true in datatable options as mentioned here: stackoverflow.com/questions/13708781/… Aug 28, 2023 at 12:30
  • Hi @BraTabs, any update on this? Please accept it as an answer if it helped you in any way. Oct 30, 2023 at 17:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.