server-side processing
server-side processing
jkmetko
Posts: 4Questions: 0Answers: 0
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!
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!
This discussion has been closed.
Replies
Allan
http://www.esn-wings.eu/AOM/tables.php
JS generating the table is located at "js/app/table-flights.js"
You want to initialise the DataTable _after_ the HTML table has been set up.
Allan
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.
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