Replies

• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  March 2009

  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 Posts: 5Questions: 0Answers: 0

  March 2009 edited March 2009

  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 Posts: 63,523Questions: 1Answers: 10,473 Site admin

  April 2009

  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 Posts: 5Questions: 0Answers: 0

  April 2009

  thank you allan, your code works perfectly.
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  April 2009

  Always good to hear ;-)
  
  Thanks for the update,
  Allan
• acidjazz Posts: 1Questions: 0Answers: 0

  September 2010

  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 Posts: 1Questions: 0Answers: 0

  March 2012 edited March 2012

  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 Posts: 63,523Questions: 1Answers: 10,473 Site admin

  March 2012

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