server-side processing

jkmetko

Hi guys,
I'm stucked on server-side processing for two days and can't figure out any other solution which might work.
I'm constantly getting this error: "Cannot read property 'asSorting' of undefined".

PHP script downloaded from example works fine, so the table should.
Here's the code:

[code]
function dataTable( id, destination ){

this.id = id;
this.destination = destination;
this.drawHeader = drawHeader;
this.drawFooter = drawFooter;
this.activateDataTable = activateDataTable;

table = '';
table += '';
table += '';
table += ' ';
table += ' ';
table += ' ';
table += '';
table += ' ';
table += ' ';
table += ' ';
table += ' ';
table += ' ';
table += ' ';
table += '';

//DRAW TABLE
destination.append( table );
this.drawHeader();
this.drawFooter();
this.activateDataTable();

//DRAW HEADER
function drawHeader(){
var header = $('#'+ this.id +'-header');

$.ajax({ url: 'php/app/ajax-table-getHeader.php',
data: { request: 'drawHeader' },
type: 'POST',
success: function(output) {
header.append( output );
}
});
};

//DRAW FOOTER
function drawFooter(){
var footer = $('#'+ this.id +'-footer');

$.ajax({ url: 'php/app/ajax-table-getHeader.php',
data: { request: 'drawFooter' },
type: 'POST',
success: function(output) {
footer.append( output );
}
});
};

//ACTIVATE DATA TABLE
function activateDataTable(){
var oTable = $('#'+this.id).dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../../php/app/ajax-test.php"
} );

};

}

$(function(){
flightsTable = new dataTable( "flightsTable", $("#widget-flightsTable") );
})
[/code]

Thank you all for advices.
Have a nice day!

SashaKos

i think you should try to add fnServerData as in examples and pay attention to aoData. Also my advice to use location.host + "/ajax-test.php" instead "../../php/app/ajax-test.php"

jkmetko

Thank you for advice, but didn't help. Any other ideas?

allan

Yes, link to the page so we can take a look and debug it :-)

Allan

jkmetko

the link is:
http://www.esn-wings.eu/AOM/tables.php

JS generating the table is located at "js/app/table-flights.js"

allan

The DataTable is being initialised when there is no information in the tale at all - your getHeader script hasn't returned and inserted the columns, so the DataTable things there are 0 columns and 0 rows. It doesn't like that too much!

You want to initialise the DataTable _after_ the HTML table has been set up.

Allan

jkmetko

OK, this is where I'm stucked. I'm probably missing something that I should know.
What you mean by "your getHeader script hasn't returned and inserted the columns"?

Commands are written in this order:
1) append table into HTML
2) create heder
3) create footer
/* the HTML table has been set up */
4) activate table

Thank you for your time, Allan.

allan

They are written in that order, but you are forgetting what the 'A' stands for in Ajax :-). The header is being loaded asynchronously... As it the content and footer as it happens.

What is happening:

1. Start Ajax request for header
2. Start Ajax request for body (although commented out at the moment)
3. Start Ajax request for footer
4. Initialise Date picker (no relevance here)
5. Initialise DataTables
6. Header loads
7. Body loads (again commented out, but for completeness)
8. Footer loads

6, 7 and 8 might occur in any order.

The cheep hack is to use jQuery's async option, but really you want to use the `success` callback to initialise the table once it is actually ready.

Allan