bServerSide = true and fnReloadAjax does not refresh data
bServerSide = true and fnReloadAjax does not refresh data
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?!
[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?!
This discussion has been closed.
Replies
to refresh when using server-side processing, call $("#researchTableJSON").dataTable().fnDraw(true);
Can I give fnDraw a url?
fnDraw just refreshes from the same data source.
Do I have to re-initialize the datatable every time I want to reload the data?
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)
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...
Can someone please help?
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.