fnServerData called twice due to Scroller

fnServerData called twice due to Scroller

DiNastyDiNasty Posts: 5Questions: 0Answers: 0
edited February 2012 in General
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

Replies

  • allanallan Posts: 63,213Questions: 1Answers: 10,415 Site admin
    The problem is that when Scroller initialises it does a draw on the table in order to allow the table to realign itself for the new layout - and since you are using server-side processing this kicks off a call to fnServerData. It might be possible for Scroller to call the DataTables' internal functions to do that sizing, but I have yet to find a reliable way of doing that - hence the call to draw the table.

    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
  • DiNastyDiNasty Posts: 5Questions: 0Answers: 0
    edited March 2012
    Hi 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
  • allanallan Posts: 63,213Questions: 1Answers: 10,415 Site admin
    Thanks for the example - I understand what is happening now - although I'm afraid I don't have an immediate solution.

    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
  • allanallan Posts: 63,213Questions: 1Answers: 10,415 Site admin
    Okay - so I do have a fix :-)

    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
  • DiNastyDiNasty Posts: 5Questions: 0Answers: 0
    Thanks a lot!

    Can't wait to update my app :D

    Thansk for the fast response and happy to help improving DataTables!

    Regards

    Gaël
This discussion has been closed.