Very simple question

comrade

On my page I have a dropdown with some elements and a datatable below. When user selects item in the dropdown, I want the datatable to show child items of the selected item. Of course I use ajax call to fetch data.

I tried doing it in a following way: on dropdown selection change I re-set the oTable.sAjaxSource (where oTable is my datatable object) so the new URL contains item ID selected in the dropdown by the user, and then I call oTable.fnDraw();

Unfortunately, this does not seem to work. Datatables makes the ajax call with the original sAjaxSource (i.e. the one that it was initialized with). Once datatables object is initialized, sAjaxSource seems to be immutable. So the simple question is: how can I make ajax calls passing different parameters to feed the datatables with different datasets? Is there a way to pass a custom search criteria?

allan

Hi comrade,

To change the target Ajax source you can use the fnReloadAjax plug-in: http://datatables.net/plug-ins/api#fnReloadAjax . If you want to roll your own, then the code in there might be quite useful as a starting point, but this should do the trick for you nicely.

At the moment the only way to pass custom data when using Ajax source (not server-side processing) is to add the parameters as GET parameters on the URL. DataTables 1.6 (beta link at the top of the page) allows you to use a custom function passed as fnServerData to modify the Ajax request, so you can do POST etc. This functionality is already available for sever-side processing.

Regards,
Allan

comrade

Thanks for an immediate answer. This is what I'm looking for, but how do I actually use this plugin function? When calling fnReloadAjax() i get javascript error "fnReloadAjax() is not a function", and indeed, in the firebug I cannot see it on my oTable object.

comrade

It works!! Brilliant! Many thanks, mate. I was a bit confused because I didn't expect that I have to copy-paste the function implementation code :) In my very humble opinion this implementation of fnReloadAjax should be in a regular API. It is a must-have for anyone doing custom server-side processing. Thanks again!

comrade

There's still one issue. I've found out that the fnReloadAjax example does the TWO ajax calls to the server.

First it makes the call on $.getJSON, using the URL that I pass as the parameter. That's fine.

But then, in fnDraw(), (line 21 of the example) I can see another GET is executed, using the same URL, but this time it appends all the 'internal' variables (iColumns, iDisplayLength etc.) to the URL. This second hit to the server, on fnDraw(), is a mystery for me, because it hits the server for the data that had already been pulled and added to the table. Is it supposed to work like this?

I used exactly the same code as in the example, without any modifications.

comrade

OK, it should be the other way. The call on fnDraw is OK because it provides all the necesarry data to do the query. But then, the first call (without the params passed in url) seems to be pointless.

comrade

OK. It seems to do hit the server on fnDraw() because the bServerSide is on. However, I cannot simply set it to false, because I do want the full server-side processing: paging, sorting, etc. all this stuff must be on the server side. Seems like the only way is to use the fnServerData.

allan

Hi comrade,

Using fnReloadAjax with server-side processing is incorrect, and the documentation for the plug-in even mentions this. If you simply want to reload the data from the source, then you call fnDraw() when using server-side processing. To then pass custom data parameters, you can do it like this: http://datatables.net/examples/server_side/custom_vars.html

Regards,
Allan