fnServerData called twice due to Scroller
fnServerData called twice due to Scroller
Hi everyone,
I have a small pb that I can't understand :
If I try to enabled Scroller : my datatable call fnServerData twice with the same parameters.
This is annoying because I'm trying to get the pipeline working with Scroller and I can't.
I'm building the table from scratch because my app is dynamic and I can't have a fixed table.
I'm using ColReorder / Scroller with a Server Side DataSource
[code]
...
// Create the Table Markup
var oTable = $("");
oTable.append($("col 1col 2"));
oTable.append($(""));
// Create the Columns Definition of the DataTable
var aoColumnsDefinition = []
aoColumnsDefinition.push({ "sName": "col 1" });
aoColumnsDefinition.push({ "sName": "col 2" });
// Retrieve the service address for getting Data
var sRestServicePath = "My_Rest_Service_Path";
// Create a DataTable object that will connect automatically to the Rest Service in order to retrieve Data
oTable.dataTable({
"bProcessing": true,
"bServerSide": true,
"bDeferRender": true,
"sScrollY": "250",
"bJQueryUI": true,
"bAutoWidth": false,
"bSortCellsTop": true,
"sAjaxSource": sRestServicePath,
"fnServerData": fnServerData,
"fnServerParams": function (aoData) { aoData.push({ "name": "SomeData", "value": "SomeData" }); },
"aoColumns": aoColumnsDefinition,
"oLanguage": { "sSearch": "Search :" },
"sDom": 'RfrtS'
});
...
function fnServerData(sSource, aoData, fnCallback) {
var aoServerData = new Array();
for (var i = 0, i < aoData.length; i++) {
aoServerData.push({ Name: aoData[i].name, Value: aoData[i].value });
}
// Call REST WS
$.ajax({
type: 'POST',
url: sSource,
contentType: "application/json; charset=utf-8",
dataType: "json",
processData: false,
data: JSON.stringify({ aoDataTableMetaData: aoServerData};),
beforeSend: fnSetAuthorizationHeader,
success: fnCallback
});
}
[/code]
When I'm running this, fnServerData is called twice.
If I modify my sDom to be "Rfrt", my fnServerData function is only called once as expected.
I don't understand that piece and this may lead to a bigger pb, my datatable still display processing if I'm using a pipeline method until I decide to sort on a column. weird behavior but my first issue is that Scroller make fnServerData happening twice.
Any thought welcome
Thanks in advance
Here is a small sample to my pb. Feel free to download it and change the sDom parameter from 'RfrtS' to 'Rfrt' and vice versa.
http://dl.dropbox.com/u/59648000/datatables.zip
I have a small pb that I can't understand :
If I try to enabled Scroller : my datatable call fnServerData twice with the same parameters.
This is annoying because I'm trying to get the pipeline working with Scroller and I can't.
I'm building the table from scratch because my app is dynamic and I can't have a fixed table.
I'm using ColReorder / Scroller with a Server Side DataSource
[code]
...
// Create the Table Markup
var oTable = $("");
oTable.append($("col 1col 2"));
oTable.append($(""));
// Create the Columns Definition of the DataTable
var aoColumnsDefinition = []
aoColumnsDefinition.push({ "sName": "col 1" });
aoColumnsDefinition.push({ "sName": "col 2" });
// Retrieve the service address for getting Data
var sRestServicePath = "My_Rest_Service_Path";
// Create a DataTable object that will connect automatically to the Rest Service in order to retrieve Data
oTable.dataTable({
"bProcessing": true,
"bServerSide": true,
"bDeferRender": true,
"sScrollY": "250",
"bJQueryUI": true,
"bAutoWidth": false,
"bSortCellsTop": true,
"sAjaxSource": sRestServicePath,
"fnServerData": fnServerData,
"fnServerParams": function (aoData) { aoData.push({ "name": "SomeData", "value": "SomeData" }); },
"aoColumns": aoColumnsDefinition,
"oLanguage": { "sSearch": "Search :" },
"sDom": 'RfrtS'
});
...
function fnServerData(sSource, aoData, fnCallback) {
var aoServerData = new Array();
for (var i = 0, i < aoData.length; i++) {
aoServerData.push({ Name: aoData[i].name, Value: aoData[i].value });
}
// Call REST WS
$.ajax({
type: 'POST',
url: sSource,
contentType: "application/json; charset=utf-8",
dataType: "json",
processData: false,
data: JSON.stringify({ aoDataTableMetaData: aoServerData};),
beforeSend: fnSetAuthorizationHeader,
success: fnCallback
});
}
[/code]
When I'm running this, fnServerData is called twice.
If I modify my sDom to be "Rfrt", my fnServerData function is only called once as expected.
I don't understand that piece and this may lead to a bigger pb, my datatable still display processing if I'm using a pipeline method until I decide to sort on a column. weird behavior but my first issue is that Scroller make fnServerData happening twice.
Any thought welcome
Thanks in advance
Here is a small sample to my pb. Feel free to download it and change the sDom parameter from 'RfrtS' to 'Rfrt' and vice versa.
http://dl.dropbox.com/u/59648000/datatables.zip
This discussion has been closed.
Replies
The way to stop the second XHR just now is to use piplining like in this example: http://datatables.net/release-datatables/examples/server_side/pipeline.html ,
Allan
Thank you for your quick answer :)
I was able to make the pipeline working for the client'side data but not for the ServerSide one.
http://live.datatables.net/eboneq/4/
Here is a short example.
So, if the data is in the js / dom, all is fine, but if I try to make an async call to a WebService/WebServer, this fails (the Processing div doesn't disappear and I don't see any data).
I have an exception in fnDataTablesPipeline at that line : [code]json.aaData.splice( 0, iRequestStart-oCache.iCacheLower );[/code] because json is not defined already.
Using the data from the dom/javascript >> everything is fine because it's available instantly but while making an async call, that line is called before the result returns (on my end at least) and then I can't have my data displayed.
After, when I know that data has been returned to JS, I can sort the table (clicking on a sort in the header) and then, data are displayed because the json object is defined ...
That the main issue I'm trying to figure out, and that's why I'm trying to fix the twice call using Scroller.
In the example I gave you above, I can't really show you my issue, because of the cross domain call issue, but if you have on your end a better hand on your server, you may be able to have that issue too I guess.
Can you give it a try and let me know ?
(change those lines by commenting / uncommenting each other and change the sAjaxSource of course)
[code]
//$.getJSON( sSource, aoData, function (json) {
fnEmulateServerCall(sSource, aoData, function(json) {
[/code]
If there is any workaround for Scroller / Pipeline because I'm stuck :D
PS : I've tryed replacing [code]
json.aaData.splice( 0, iRequestStart-oCache.iCacheLower );
json.aaData.splice( iRequestLength, json.aaData.length );
fnCallback(json);[/code] by [code]if(json.aaData){
json.aaData.splice( 0, iRequestStart-oCache.iCacheLower );
json.aaData.splice( iRequestLength, json.aaData.length );
fnCallback(json);
}[/code] with no luck :/
Thanks in advance :)
(you've made a really beautiful control BTW)
PS2: Just to let you know that without Scroller (using Pagination), the fnDatatablesPipeline is only called once, and it works perfectly.
So my issue is really that second call to fnDataTablesPipeline that seems to break my DataTable
This is the sequence:
1. DataTables starts its initialisation
2. Scroller is initialised - adds a callback to listen for the first draw
3. DataTables makes the Ajax request
4. It carries on and does the first draw
5. Scroller updates the table, with the Ajax request still being served - error
So I'm thinking the solution should be that Scroller should wait for init complete rather than first draw...
Allan
I've just committed the change required to Scroller (available as the nightly 1.0.2.dev version on the downloads page). I've updated your example to use this nightly version now: http://live.datatables.net/eboneq/5/edit .
Lovely stuff :-)
Allan
Can't wait to update my app :D
Thansk for the fast response and happy to help improving DataTables!
Regards
Gaël