reload ajax source

vlocker27

whats the best way to have datables reload the ajaxsource for new data without having to press refresh on the browsers

thanks

allan

Hi vlocker27,

The best way of doing this it to make use of the fnReloadAjax() API plug-in function: http://datatables.net/plug-ins#api_fnReloadAjax

If you want to do a periodic update, then you can stick it into a setTimeout(), or you can have it event driven for when the user types/clicks something.

Hope this helps!
Allan

vlocker27

i seem to get an error when i copy n past the "$.fn.dataTableExt.oApi.fnReloadAjax" to my file and placed it after the original code, "oTable = $('#infoTable').dataTable..."

then when i called like below i got error "Object doesn't support this property or method" on the ''oTable.fnReloadAjax();" line



oTable = $('#infoTable').dataTable({
'bProcessing': true,
'sAjaxSource': data.php',
'aaSorting': [[ 0, "desc" ]],
'iDisplayLength': 10,
'bAutoWidth': false,
'bSortClasses': false
});

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource ) {
if ( typeof sNewSource != 'undefined' )
oSettings.sAjaxSource = sNewSource;

this.fnClearTable( this );
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;

$.getJSON( oSettings.sAjaxSource, null, function(json) {
/* Got the data - add it to the table */
for ( var i=0 ; i

allan

Hi vlocker27,

Thanks for posting your init code. Firstly, and probably most importantly you have a syntax error at "data.php". Also, I don't see any sign of $(document).ready(). I've rearranged your code slightly, and this works fine:

[code]
$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource ) {
if ( typeof sNewSource != 'undefined' )
oSettings.sAjaxSource = sNewSource;

this.fnClearTable( this );
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;

$.getJSON( oSettings.sAjaxSource, null, function(json) {
/* Got the data - add it to the table */
for ( var i=0 ; i

vlocker27

thank you allan, your code works perfectly.

allan

Always good to hear ;-)

Thanks for the update,
Allan

acidjazz

cleaned up that function code a little bit :

[code]

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource ) {

if ( typeof sNewSource != 'undefined' ) {
oSettings.sAjaxSource = sNewSource;
}

this.fnClearTable( this );
this.oApi._fnProcessingDisplay( oSettings, true );

$.getJSON( oSettings.sAjaxSource, null, $.proxy(function(json) {

for ( var i=0 ; i

coderextreme

This appears to work great, except if I use it for reloading the table using setTimeout every 500 milliseconds. Is there a way where it doesn't redraw the whole table? Which version of the plugin should be used on this page? I used the last one. I note that the table sorting stays in place between reloads, which is something I like.

Edit: I found that the one from the official source does what I want, except I want to get rid of the "Processing..." overlay (can't really read it) that continually pops up. Is there some way to remove that?

Edit: Here's what worked for me:

[code] $(document).ready(function() {
var oTable = $('#example').dataTable( {
"oLanguage": {
"sProcessing": ""
},
'bAutoWidth': false,
"iDisplayLength": 100,
"bProcessing": true,
"bJQueryUI": true,
"sAjaxSource": "/wasp/service/data_missi
ons/"
} );
function updateTable() {
oTable.fnReloadAjax();
setTimeout(updateTable, 500);
}
updateTable();
} );
[/code]

And a CSS style (you may want to do this on a table by table basis).
[code]
.dataTables_processing {
z-index:-999;
}
[/code]
Thanks,

John

allan

Hi John,

To remove the "Processing..." display, just remove, or set to false the bProcessing in your init object.

Allan