bServerSide = true and fnReloadAjax does not refresh data

ambriglia

I have this datatable...

[code]$("#researchTableJSON").dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "store_handler.ashx?cmd=99&pubId=6&sub=0",
"bJQueryUI": true,
"bAutoWidth": false,
"sScrollY": "450px",
"bPaginate": false,
"bSort": false,
"bInfo": true,
//"aaData": [["No Data Available in Table","",""]],
"aoColumns": [
{ "sTitle": "Filter: ", "sClass": "center" },
{ "sTitle": "Price", "sWidth": "280px", "sClass": "center" },
{ "sTitle": "Action", "sWidth": "61px", "sClass": "center" }
]
});[/code]

And use the command below to refresh the data. NOTICE I am sending in a different url!

[code]$("#researchTableJSON").dataTable().fnReloadAjax("store_handler.ashx?cmd=99&pubId=2&sub=0");[/code]

And for some reason, the data is not updated in the table. The ashx page returns valid JSON according to JSONlint.com.

Also, if I comment out the [code]"bServerSide": true,[/code] line, the datatable does refresh the data. However,
I assume I want bServerSide = true so all the sorting and what not can be done on the server side, which improves speed.

Finally, I noticed when bServerSide = true, two gets are performed instead of one...

What am I doing wrong?!

fbas

if "bServerSide": true, you aren't using Ajax source. you are using db source (server-side) processing.

to refresh when using server-side processing, call $("#researchTableJSON").dataTable().fnDraw(true);

ambriglia

Maybe refresh isn't the proper term. Notice the fnReloadAjax url has a different pubId than SAjaxSource. So, technically, I am trying to reload the datatable with a different set of data.

Can I give fnDraw a url?

fbas

I guess fnReloadAjax doesn't work with server processing. (I could be wrong, but I don't have a better answer.. I'll leave this for someone who has more experience with this function.)

fnDraw just refreshes from the same data source.

ambriglia

How am I supposed to refresh the datatable with a different set of data with server side processing? Is it even possible?

Do I have to re-initialize the datatable every time I want to reload the data?

fbas

The traditional approach (since you're using server side processing) would be to add some parameters to the server call that will filter your data set. see the addition of fnServerData below, and change to sAjaxSource (taking off params in the AjaxSource and adding them dynamically for server calls in fnServerData)

http://www.datatables.net/ref#fnServerData
[code]
/* POST data to server */
$(document).ready(function() {
$('#researchTableJSON').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "store_handler.ashx",
"bJQueryUI": true,
"bAutoWidth": false,
"sScrollY": "450px",
"bPaginate": false,
"bSort": false,
"bInfo": true,
//"aaData": [["No Data Available in Table","",""]],
"aoColumns": [
{ "sTitle": "Filter: ", "sClass": "center" },
{ "sTitle": "Price", "sWidth": "280px", "sClass": "center" },
{ "sTitle": "Action", "sWidth": "61px", "sClass": "center" }
],

"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some data to send to the source, and send as 'POST' */
aoData.push( { "name": "cmd", "value": "99" } );
aoData.push( { "name": "pubId", "value": get_pub_id() } );
aoData.push( { "name": "sub", "value": get_sub_id() } );

$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
} );
} );

[/code]

and in your store_handler.ashx code, detect the parameters 'cmd', 'pubId' and 'sub' sent in, use them to filter the result set (which you already do)

ambriglia

This does work, but it can be very slow. In fact, I think removing bServerSide and using fnReloadAjax is quicker.

This only works with bDestroy = true. I assume it is re-initializing the datatable every time. Is there a quicker approach? I feel like there should be a way to just reload the data without having to destroy the datatable...

ambriglia

Anyone?

ambriglia

I know I have to be doing something wrong. Some of the tables I will be loading will contain over 5K rows, which shouldn't be a problem for datatables to load. I really need to find a way to properly setup the server-side processing.

Can someone please help?

jcrawford

I am also looking for a way to do this, basically I have a set of radio buttons above a datatable which show well data :D

When I click from radio button to radio button I would like to change the datasource for the table and have it reload with the new server side source but without reloading the page. Currently I have on click of the radio button loading the same page with different query parameters loading different templates for the tables. Every page has the same columns just different data.