Tabbed DataTable Issue
Tabbed DataTable Issue
zgoforth
Posts: 493Questions: 98Answers: 2
Hello, so I have created a tabbed DataTable that has 8 separate tabs for different categories. All the information/data used to populate the first 7 tabs are from the same source/SharePoint list. The 8th tab has relevant information/data, but the values are different. When I try to draw that data to the 8th tab, I get a bunch of errors saying:
DataTables warning: table id=weeklyweight - Requested unknown parameter 'WeeklyWeight' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4
I think what could possibly be messing it up is maybe the Name/Title value because that is getting pulled from both lists.
How can I get around this?
Here is my JS I will attach the rest of my snippet in a Fiddle as it is to large to fit in the body of this post:
function loadData() {
var webUrl = _spPageContextInfo.webabsoluteurl;
var urls = [webUrl + "/_api/web/lists/getbytitle('ContestInformation')/items?$select=Name/Id,Name/Title,Weight,WeeklyWeight,Steps,WeeklySteps,ExerciseMinutes,WeeklyExerciseMin,StepPoints,MinutePoints&$expand=Name",
webUrl + "/_api/web/lists/getbytitle('WeeklyWinners')/items?$select=Name/Id,Name/Title,Week,Category,Prize&$expand=Name"
];
for (i = 0; i < urls.length; i++) { //for loop to run through the AJAX until all URLs have been reached
$.ajax({
url: urls[i],
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
console.log(data);
if (data.d != null && data.d != undefined && data.d.results.length > 0) {
var table = $('#weeklyweight').DataTable();
var table1 = $('#overallweight').DataTable();
var table2 = $('#weeklysteps').DataTable();
var table3 = $('#overallsteps').DataTable();
var table4 = $('#weeklyminutes').DataTable();
var table5 = $('#overallminutes').DataTable();
var table6 = $('#steppoints').DataTable();
var table7 = $('#minutepoints').DataTable();
var table8= $('#weeklywinners').DataTable();
table.rows.add(data.d.results).draw();
table1.rows.add(data.d.results).draw();
table2.rows.add(data.d.results).draw();
table3.rows.add(data.d.results).draw();
table4.rows.add(data.d.results).draw();
table5.rows.add(data.d.results).draw();
table6.rows.add(data.d.results).draw();
table7.rows.add(data.d.results).draw();
table8.rows.add(data.d.results).draw();
}
}
});
}
}
$(document).ready( function () {
function filterGlobal () {
$('#weeklyweight').DataTable().search(
$('#global_filter').val()
).draw();
$('#overallweight').DataTable().search(
$('#global_filter').val()
).draw();
$('#weeklysteps').DataTable().search(
$('#global_filter').val()
).draw();
$('#overallsteps').DataTable().search(
$('#global_filter').val()
).draw();
$('#weeklyminutes').DataTable().search(
$('#global_filter').val()
).draw();
$('#overallminutes').DataTable().search(
$('#global_filter').val()
).draw();
$('#steppoints').DataTable().search(
$('#global_filter').val()
).draw();
$('#minutepoints').DataTable().search(
$('#global_filter').val()
).draw();
$('#weeklywinners').DataTable().search(
$('#global_filter').val()
).draw();
}
var table = $('#weeklyweight').DataTable({
"columns": [
{ "data": "Name.Title" },
{ "data": "WeeklyWeight", render : $.fn.dataTable.render.number( ',', '.', 2, '', '%' ) }
],
"order": [[ 1, "desc" ]]
});
var table1 = $('#overallweight').DataTable({
"columns": [
{ "data": "Name.Title" },
{ "data": "Weight", render : $.fn.dataTable.render.number( ',', '.', 2, '', '%' ) }
],
"order": [[ 1, "desc" ]]
});
var table2 = $('#weeklysteps').DataTable({
"columns": [
{ "data": "Name.Title" },
{ "data": "WeeklySteps" }
],
"order": [[ 1, "desc" ]]
});
var table3 = $('#overallsteps').DataTable({
"columns": [
{ "data": "Name.Title" },
{ "data": "Steps" }
],
"order": [[ 1, "desc" ]]
});
var table4 = $('#weeklyminutes').DataTable({
"columns": [
{ "data": "Name.Title" },
{ "data": "WeeklyExerciseMin" }
],
"order": [[ 1, "desc" ]]
});
var table5 = $('#overallminutes').DataTable({
"columns": [
{ "data": "Name.Title" },
{ "data": "ExerciseMinutes" }
],
"order": [[ 1, "desc" ]]
});
var table6 = $('#steppoints').DataTable({
"columns": [
{ "data": "Name.Title" },
{ "data": "StepPoints" }
],
"order": [[ 1, "desc" ]]
});
var table7 = $('#minutepoints').DataTable({
"columns": [
{ "data": "Name.Title" },
{ "data": "MinutePoints" }
],
"order": [[ 1, "desc" ]]
});
var table7 = $('#weeklywinners').DataTable({
"columns": [
{ "data": "Week"},
{ "data": "Name.Title" },
{ "data": "Category" },
{ "data": "Prize"}
],
"order": [[ 0, "desc" ]]
});
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
} );
loadData();
} );
Fiddle: https://jsfiddle.net/4pb3cfrs/
This question has accepted answers - jump to:
This discussion has been closed.
Answers
This code is using the same dataset for each table:
Sounds like your JSON response (
data.d.results) doesn't contain the propertyWeeklyWeight. Start by looking at your JSON response using the browser's network inspector tool.Kevin
So both responses in my Network tab of the Dev Tools, are
and the other is
And when I click on both of these request to view the response, they are both stored as data.d.results but carry different values/items
Going to try this, what do you think.
Instead of an AJAX call, use a fetch then a promise
Are you making two requests?
If so you need to populate the proper Datatables to match the request. Otherwise you are overwriting the first response with the second. Which is failing because they are different structures for different tables.
It looks like you pasted the request. What I wanted is for you to look at the response.
Kevin
@kthorngren Here is an example of the response from the first request:
Here is an example from the second request:
Ok. So either make two separate requests (not in a loop) or on the first iteration populate the 7 Datatables and on the second populate the 8th.
Kevin
So instead of what I have in the OP something like this?
Hm I posted the reply, but it didn't go through?
Something like this?
I fixed it
One more issue I am dealing with (only applies from the first list/first 7 tabs). For the first tab, it is posting everyones name, even if the weeklyweight value is null. Then for the following tabbed tables the corresponding field/value it is posting with it (i.e overallweight, weeklysteps, etc.) if the value is null it still posts everyones names with empty columns beside it. Can I render out the null values with names?
For each corresponding "table.rows.add" would I do something along the lines of
Questions duplicated in this thread.
Kevin