Issue with fnInitComplete and AJAX source

Thib

Hi !

I'm trying to populate a table using an AJAX source, without server-side processing.

I think this is related to this post : http://datatables.net/forums/discussion/34/fninitcomplete-exists-or-just-a-myth/p1
But in my case, the DataTables params are externalized and not passed directly in the dataTable function.

Here is the code :

[code]
var oTable_myTableId;
var oTable_myTableId_params = {
"bDeferRender":true,
"sDom":"lfrtip",
"fnInitComplete":function() {
oTable_myTableId.fnAdjustColumnSizing(true);
},
"aoColumns":[
{
"mData":"id",
},
{
"mData":"firstName",
},
{
"mData":"lastName",
},
{
"mData":"address.town.name",
},
{
"mData":"mail",
}
]
};

$(document).ready(function(){
$.ajax({
url:'myUrl',
dataType: 'json',
async: false,
success: function(data){
oTable_myTableId_params.aaData = data;
oTable_myTableId = $('#myTableId').dataTable(oTable_myTableId_params);
});
});
[/code]

The error is :
[quote]Uncaught TypeError: Cannot call method 'fnAdjustColumnSizing' of undefined[/quote]

When I remove the fnInitComplete parameter, it works well.

Any idea ?

Thanks !

allan

You are initialising the DataTable twice there - which you really don't want to be doing. Initialise it once only. I'd suggest you let DataTables make the Ajax call to the server, rather than doing it yourself. Use sAjaxDataProp if you want DataTables to read from a data object source other than `aaData` .

Allan

Thib

Actually I initialise the table only once, my mistake ... code edited. :-/

The real issue is that I don't want the end-users to be forced to change their existing web services, in order to be as inobstrusive as possible.

When the server-side processing is enabled, the parameters needed by DataTables are very "specific" (and numerous) so I don't find it weird to force them to adapt the web services (and return the exact needed parameters in the response : sEcho, iDisplayStart, ...).

But in the case of AJAX source (without server-side processing), DataTables just need the data to be wrapped in the aaData property. That's why it could be great for the end-users to be able to use their legacy web services, without changing anything, and let it just return the objects to display (in JSON).

The data returned by the server usually look like :

[code]
[
{
"id":1,
"firstName":"Wing",
"lastName":"Talley",
"mail":"consectetuer.mauris@aaliquet.com",
"address":{
"id":1,
"street":"P.O. Box 830, 8335 Pellentesque Av.",
"town":{
"id":1,
"name":"Derry",
"postcode":"G9N 5J7"
}
}
},
...
]
[/code]

This is the reason why I make the AJAX call myself and wrap the returned data with the aaData property before initializing the table :

[code]
success: function(data){
oTable_myTableId_params.aaData = data;
oTable_myTableId = $('#myTableId').dataTable(oTable_myTableId_params);
});
[/code]

So, in your opinion, is it a wrong way ?
If not, maybe the fnInitComplete error would be caused by a scope issue ?

Thanks !

allan

I would say it is yes, since DataTables can do that already for you. Just set sAjaxDataProp to be an empty string and it will ready the data source array directly.

I would also say you should call the adjust column size function like this:

[code]
this.fnAdjustColumnSizing(true);
[/code]

Then there can never be a scoping error.

Allan

Thib

Sweet Jesus !

I had never thought setting the sAjaxDataProp to be an empty string.

Everything is now working like a charm.
Many thanks Allan !