Need help with using fnServerData.

incutonez

Hello all. I'm trying to load some information from a JSON file into my datatable, so I'm going about this with fnServerData and making an ajax call, but I'm extremely new to jQuery, so I'm not really understanding some of the fundamental syntax that datatables is carrying over. My code looks like this:

[code]
...
var blah = new Object();
var file = 'something.json';
var aoData;
var table = $(#the_table).dataTable(
{
'sPaginationType':'full_numbers',
'bAutoWidth':false,
'bServerSide':true,
'sAjaxSource':file,
'fnServerData':function(sSource, aoData, fnCallback) {
$.ajax({
'dataType':'json',
'type':'GET',
'url':sSource,
'data':aoData,
'success':function(json) {
blah = json;
alert(blah.row.band[0]);
fnCallback(json);
}
});
}
});
alert(blah.row.band[0]);
...
[/code]

So basically what I don't understand is this... when I set 'blah = json' in the success portion of fnServerData, the alert pops up with the information from my JSON file, but when I print outside of the table variable, blah doesn't contain the information... almost as if 'blah = json' was a local copy, and it only stays within that scope. So what's the deal? (I know this is more of just a jQuery question, but I also have a DataTables question.)

Now when I do 'success' and call function(json), I don't think I really understand this syntax. And actually, I don't understand the fnServerData syntax... so fnServerData is a function with 3 parameters, right? I don't understand the last 2. Is aoData information I need to be passing to the function? If so, I'm not really sure what I need to be passing it.

Also, I'm assuming fnCallback is a function I need to create, but I simply just want to add my JSON data to the table, so I'm not really sure what this fnCallback should look like.

I've tried looking over the examples and other sources online, but nothing has helped thus far mainly because it seems like a lot of this information is assumed knowledge.

Anyway, if anyone needs me to try and clarify what I'm talking about, go ahead and yell at me, and if I've done something wrong with my code, go ahead and yell at me, I want to learn what's going on. Thanks.

allan

With your first point about the alert of 'blah' - I presume you are referring to why the alert at the end of the block above doesn't include blah? What you need to remember is that the Ajax call is asynchronous - so while that is happening in the 'background' the main Javascript thread (it's not really a thread, but close enough for this!) continues to run. So in fact with the code you have above you would expect the alert at the bottom of the code to fire before the alert in fnServerData.

What you could do is add a setTimeout to see this effect - setTimeout( function () { alert(blah.row.band[0]); }, 2000 ); (at the end). You are right that blah is a global variable above, it's just that it won't have been assigned on the first blah.

It is possible to use a synchronous Ajax call to make that easier - but that locks the browser up and generally isn't done. In DataTables you can use fnInitComplete - which will fire once the full initialisation and first draw of the table has been done.

With your second question about fnServerData itself - what you need to bare in mind here is that you have assigned the parameter "fnServerData" a function which takes three parameters. DataTables can then do whatever it wants to with that parameter (variable), and pass it around where ever. When it wants to activate the function it does so as you would expect with any function - you just call it and pass in the parameters you want.

In the case of fnServerData, the first parameter is the address, the second is the data array that DataTables needs you to send to the server (you can add, edit the array as needed), and the third is the function that DataTables needs you to run once you've got the data needed. So how you get the data is up to you, but DataTables is telling you want it needs, and what it needs you to do. The API for this is defined here: http://datatables.net/usage/callbacks#fnServerData

There is a degree of knowledge assumed in the DataTables documentation - out of necessity though - this site can't document the ins and outs of javascript those new to Javascript and those experienced in it! That's one of the reasons for this forum - so questions can be asked. And hopefully (!) useful answers provided...

Regards,
Allan

incutonez

Hey Allan,

That's the conclusion I came to--that because I'm using AJAX, 'blah' isn't getting assigned in the time before it's being called. It definitely makes sense now, but for the longest time, I had no idea what was going on. I'm glad you brought up fnInitComplete, I will definitely try using that.

And yeah, I understand why there's a lot of assumed knowledge, but I'm even noticing assumed knowledge in jQuery beginner's books, so it seems like a true beginner should start with a straight up Javascripting book, which would take even more time that I don't have. So I'm left with throwing myself into pre-made code and syntax that I'm a little shaky on.

I'm slowly figuring things out. Thanks for the reply! You cleared up all of my questions.

Also, is there a page that lists every parameter/function for dataTables? I saw there were some individual pages, but being a beginner, I like having a complete list of every parameter/function available. Just curious.

allan

Hi incutonez,

Yup that's the problem with programming books sometimes... I've found that DOM Scripting ( http://www.amazon.com/DOM-Scripting-Design-JavaScript-Document/dp/1590595335 ) is a good one for teaching the fundamentals of Javascript and DOM interaction. Personally I believe it's important to understand the fundamentals of the language before using the libraries - jQuery and friends hide a lot of stuff that it can be useful to be aware of, or at least know how to solve the problems. But these things take time to learn.

As for a list of all parameters - it's something I've been planning to do for quite a while now, but unfortunately never had time. What I will do at some point is exactly that, a searchable table of all parameters etc with example code, and also bundle it into an AIR app, so each version of DataTables will have the correct documentation always available for it. Again sadly, it's something that takes time :-(

Regards,
Allan