Multiple Tables with sAjaxSource showing same data
Multiple Tables with sAjaxSource showing same data
Rnadom_Walk
Posts: 4Questions: 0Answers: 0
I have two tables on one page built by looping through an obejct with OS name and some stats to pull back from an Ajax source. Later there will be more OSes to include, thus the looping solution.
I build each table header and blank body html first. I thought this may help, then I intialise data tables:
[code]$('.dataTable').dataTable(); [/code]
Then I loop my OSes again and call datatables with sAjaxSource
The url for the Ajax source is built dynamicaly: [code]var url = "/cgi-bin/cp_loads.plx?Type=" + os;[/code] and this works fine.
The page thinks for a minute, then displays the same data in both tables. I have tried the generated URLs directly and they return different data, as expected.
Been tearing my hair out all afternoon on this one. Thanks for any help
I build each table header and blank body html first. I thought this may help, then I intialise data tables:
[code]$('.dataTable').dataTable(); [/code]
Then I loop my OSes again and call datatables with sAjaxSource
The url for the Ajax source is built dynamicaly: [code]var url = "/cgi-bin/cp_loads.plx?Type=" + os;[/code] and this works fine.
The page thinks for a minute, then displays the same data in both tables. I have tried the generated URLs directly and they return different data, as expected.
Been tearing my hair out all afternoon on this one. Thanks for any help
This discussion has been closed.
Replies
[code]$('dtable_'+os).dataTable();[/code]
in the loop to make a different table for each?
First I create the tables (my HTML has divs for each target OS):
[code]
$.each(data.Performance_Stats, function (os) { // for each OS build blank table
var headers = ["Server", "ELF"];
var metrics = data.Performance_Stats[os]; // short cut for sanity
$.each(metrics, function (table) {
$.each(metrics[table], function (column) {
// we add one to col number as javascript starts at zero, but we have
// server and ELF in 0 and 1, so first usable here is 2
headers[1+ metrics[table][column].col] = metrics[table][column].name;
});
});
// Now build the empty table and stuff it into the correct div
var html = "Top Servers For: "+os+" ";
$.each(headers, function (i, name) { html += '' + name + '' } );
html += "";
$('#'+os).append(html);
});
[/code]
Then I try to populate them with an Ajax Query via datatables.
[code]
var dtable = {};
$.each(data.Performance_Stats, function (os) {
var url = "/cgi-bin/cp_loads.plx?Type=" + os;
dtable[os] = $('#tab_'+os).dataTable({
"bProcessing": true,
"sAjaxSource": url,
"sServerMethod": "POST",
});
});
[/code]
So I believe I have unique table ids. If I console.dir(dtable) I see two different objects in there. Yet the display is showing the same data in each table.
I have stored the dataTable objects in the dtable oobject, and when I console.dir that I can see they are different. Is there a way to see the returned json inside the dataTable object, or to display what is returned when I instantiate them?
As you may have gathered, I am new to Javascript. Perl is my normal home, so I may be making a basic error somewhere.
Thanks for all the assistance.
Allan