Refresh data table without retrieving new data from the server
Refresh data table without retrieving new data from the server
Hi,
First I'd like to say great work to the author (Allan Jardine) on DataTables !
Now with the problem - I was using server side processing and needed to refresh my data without retrieving a new data set from the server, this was necessary because I had some callback functions on draw events that took care of extra processing, and I needed a way to re-call them on certain events (if you need to know why exactly, I had a separate column navigator integrated and I needed to re-apply some classes and events to some cells and add an extra row every time the user would switch column pages).
Basically, I needed to call fnDraw() without it retrieving new data from the server, but re-using the old data.
Here is what I did:
when initializing my dataTable:
[code]
"fnServerData": function ( sSource, aoData, fnCallback )
{
$.getJSON( sSource, aoData, function (json)
{
lastDataSet = deepCopy( json );
fnCallback( json );
} );
},
[/code]
So here I make a copy of the data set retrieved from the server, where deepCopy() is just a function that makes a deep copy of an object. A more elegant solution would be to integrate this in the dataTables code by saving the "json" variable in the _fnAjaxUpdateDraw() function and possibly adding an extra parameter somewhere that would specify that it is to use the last data set.
And the actual call:
[code]
$.fn.dataTableExt.oApi.fnRefresh = function ( oSettings, fnCallback )
{
// make sure we already have a previously retrieved data set, if not query the server
if ( lastDataSet )
this.oApi._fnAjaxUpdateDraw ( oSettings, lastDataSet );
else
this.fnDraw();
}
[/code]
This once again is a little ugly because of the use of the "lastDataSet" global variable, but I rather not fiddle too much with the dataTable code.
Also note that you need to modify one line the the jQuery code, somewhere around line 4855:
[code]
this.oApi._fnAjaxUpdateDraw = _fnAjaxUpdateDraw;
[/code]
This is to make the _fnAjaxUpdateDraw() function public for use by our custom function.
Hope this helps someone, and if you have a better and more efficient way of doing this, which there probably is, please do correct me and let me know. Maybe there is a provided method that already does the same thing? If not, maybe integrate this in a future release?
Thanks!
Artur
First I'd like to say great work to the author (Allan Jardine) on DataTables !
Now with the problem - I was using server side processing and needed to refresh my data without retrieving a new data set from the server, this was necessary because I had some callback functions on draw events that took care of extra processing, and I needed a way to re-call them on certain events (if you need to know why exactly, I had a separate column navigator integrated and I needed to re-apply some classes and events to some cells and add an extra row every time the user would switch column pages).
Basically, I needed to call fnDraw() without it retrieving new data from the server, but re-using the old data.
Here is what I did:
when initializing my dataTable:
[code]
"fnServerData": function ( sSource, aoData, fnCallback )
{
$.getJSON( sSource, aoData, function (json)
{
lastDataSet = deepCopy( json );
fnCallback( json );
} );
},
[/code]
So here I make a copy of the data set retrieved from the server, where deepCopy() is just a function that makes a deep copy of an object. A more elegant solution would be to integrate this in the dataTables code by saving the "json" variable in the _fnAjaxUpdateDraw() function and possibly adding an extra parameter somewhere that would specify that it is to use the last data set.
And the actual call:
[code]
$.fn.dataTableExt.oApi.fnRefresh = function ( oSettings, fnCallback )
{
// make sure we already have a previously retrieved data set, if not query the server
if ( lastDataSet )
this.oApi._fnAjaxUpdateDraw ( oSettings, lastDataSet );
else
this.fnDraw();
}
[/code]
This once again is a little ugly because of the use of the "lastDataSet" global variable, but I rather not fiddle too much with the dataTable code.
Also note that you need to modify one line the the jQuery code, somewhere around line 4855:
[code]
this.oApi._fnAjaxUpdateDraw = _fnAjaxUpdateDraw;
[/code]
This is to make the _fnAjaxUpdateDraw() function public for use by our custom function.
Hope this helps someone, and if you have a better and more efficient way of doing this, which there probably is, please do correct me and let me know. Maybe there is a provided method that already does the same thing? If not, maybe integrate this in a future release?
Thanks!
Artur
This discussion has been closed.
Replies
I'm not quite clear on the need to call fnDraw()? Can you just perform standard DOM manipulation to change the classes etc that are in the table - or have I missed something?
Another option to the one you propose is to use my pipeline example as a local cache of data ( http://datatables.net/examples/server_side/pipeline.html ). You could even make the cache size the same as the page length so it will only store the current page.
Regards,
Allan