How to resolve Javascript Datatable reinitialising error
- or -
Post a project like this1519
£200(approx. $250)
- Posted:
- Proposals: 9
- Remote
- #2697080
- Awarded
Top rated PHP Web Development | WordPress | Magento | Drupal | OpenCart | PrestaShop | Joomla
Leicester
AI & Data Science Engineer | Nodejs | Ruby On Rails | AWS | GCP | Python | React | Angular |
Auckland
software engineer|Full-Stack Software Developer| web developer| App developer | AI Engineer | WordPress
Indore
17269888751371050754108868122723942275501279233428411513427171
Description
Experience Level: Intermediate
I am working on making a datatable from a SharePoint list. I've gone to datatables.net and I am unable to make the standard Datatable but I am having issues adding API's or adding more features to the standard Datatable.
It's stating I'm trying to reinitialize the data table more than once and won't load at all anymore when I add more features.
The datatables site doesn't give clear instructions for combining functions that use Ajax to pull data.
Also looking for help with adding additional add-ons and features to my project.
0
So with this Code I am able to pull a SharePoint list and populate a datatable
$(document).ready(function() {
loadItems();
});
function loadItems() {
var siteUrl = _spPageContextInfo.webAbsoluteUrl;
var oDataUrl = siteUrl + "/_api/web/lists/getbyTitle('MockList')/items?$select=Title,Tasked_x0020_Organization,Acknowledgement,Status,Task";
$.ajax({
url: oDataUrl,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: mySuccHandler,
error: myErrHandler
});
}
function mySuccHandler(data) {
try {
$('#table_id').DataTable({
"aaData": data.d.results,
"aoColumns": [
{
"mData": "Title"
},
{
"mData": "Tasked_x0020_Organization"
},
{
"mData": "Acknowledgement"
},
{
"mData": "Status"
},
{
"mData": "Task"
}
]
});
} catch (e) {
alert(e.message);
}
}
function myErrHandler(data, errMessage) {
alert("arugula: " + errMessage);
}
What I wanted to add is column filter dropdowns and multiple checkbox selection boxes
so I added this code
$(document).ready(function() {
function cbDropdown(column) {
return $('', {
'class': 'cb-dropdown'
}).appendTo($(' 0 ? '^(' + vals + ')$' : '', true, false)
.draw();
// Highlight the current item if selected.
if (this.checked) {
$(this).closest('li').addClass('active');
} else {
$(this).closest('li').removeClass('active');
}
// Highlight the current filter if selected.
var active2 = ddmenu.parent().is('.active');
if (active && !active2) {
ddmenu.parent().addClass('active');
} else if (!active && active2) {
ddmenu.parent().removeClass('active');
}
});
column.data().unique().sort().each(function(d, j) {
var // wrapped
$label = $(''),
$text = $('', {
text: d
}),
$cb = $('', {
type: 'checkbox',
value: d
});
$text.appendTo($label);
$cb.appendTo($label);
ddmenu.append($('').append($label));
});
});
}
});
});
and I get the error message about "DataTables warning: table id={id} - Cannot reinitialise DataTable"
I got this code from https://jsfiddle.net/41vgefnf/10/
is there a way for me to add this code into my original so that they initialise in proper order?
It's stating I'm trying to reinitialize the data table more than once and won't load at all anymore when I add more features.
The datatables site doesn't give clear instructions for combining functions that use Ajax to pull data.
Also looking for help with adding additional add-ons and features to my project.
0
So with this Code I am able to pull a SharePoint list and populate a datatable
$(document).ready(function() {
loadItems();
});
function loadItems() {
var siteUrl = _spPageContextInfo.webAbsoluteUrl;
var oDataUrl = siteUrl + "/_api/web/lists/getbyTitle('MockList')/items?$select=Title,Tasked_x0020_Organization,Acknowledgement,Status,Task";
$.ajax({
url: oDataUrl,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: mySuccHandler,
error: myErrHandler
});
}
function mySuccHandler(data) {
try {
$('#table_id').DataTable({
"aaData": data.d.results,
"aoColumns": [
{
"mData": "Title"
},
{
"mData": "Tasked_x0020_Organization"
},
{
"mData": "Acknowledgement"
},
{
"mData": "Status"
},
{
"mData": "Task"
}
]
});
} catch (e) {
alert(e.message);
}
}
function myErrHandler(data, errMessage) {
alert("arugula: " + errMessage);
}
What I wanted to add is column filter dropdowns and multiple checkbox selection boxes
so I added this code
$(document).ready(function() {
function cbDropdown(column) {
return $('', {
'class': 'cb-dropdown'
}).appendTo($(' 0 ? '^(' + vals + ')$' : '', true, false)
.draw();
// Highlight the current item if selected.
if (this.checked) {
$(this).closest('li').addClass('active');
} else {
$(this).closest('li').removeClass('active');
}
// Highlight the current filter if selected.
var active2 = ddmenu.parent().is('.active');
if (active && !active2) {
ddmenu.parent().addClass('active');
} else if (!active && active2) {
ddmenu.parent().removeClass('active');
}
});
column.data().unique().sort().each(function(d, j) {
var // wrapped
$label = $(''),
$text = $('', {
text: d
}),
$cb = $('', {
type: 'checkbox',
value: d
});
$text.appendTo($label);
$cb.appendTo($label);
ddmenu.append($('').append($label));
});
});
}
});
});
and I get the error message about "DataTables warning: table id={id} - Cannot reinitialise DataTable"
I got this code from https://jsfiddle.net/41vgefnf/10/
is there a way for me to add this code into my original so that they initialise in proper order?
Tyrone F.
100% (2)Projects Completed
1
Freelancers worked with
1
Projects awarded
33%
Last project
12 Sep 2020
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies