Multiple Tables with sAjaxSource showing same data

Rnadom_Walk

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

tangerine

You are only initialising one table. Different tables need different id's.

Rnadom_Walk

so I could do something like

[code]$('dtable_'+os).dataTable();[/code]

in the loop to make a different table for each?

Rnadom_Walk

OK, I was home last night, and my code is at work. Here in some more detail is how I am populating my tables

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.

AllanCochrane

You have confirmed via the browser debugging tools that the ajax calls are actually getting different data for each table?

Rnadom_Walk

I have checked the url I am calling and it differs for each OS. I have called said URL and it returns the correct data. So I believe they really are getting different data.

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

That looks like it probably should work. I think we'd need a link to the page to be able to debug it and figure out what is going on.

Allan