title: Periodically Load DataTables via an AJAX Call
body: <p>Below is my code:</p>
  
  <pre><code>(function worker() {
  oTable = $('#example').dataTable({"iDisplayLength" : 25, "sAjaxSource": "/getservicevers/?value=" + QueryString.stage ,"bDestroy" : true ,  "fnServerData" :
                  function ( sSource, aoData, fnCallback ) {
                          $.ajax( {
                                   "dataType": 'json',
                                  "type": "GET",
                                  "url": sSource,
                                  "async":false,
                                  "success": function (json)
                                  {
                                          fnCallback(json);
                                  },
                                  complete: function() {
                                  setTimeout(worker, 5000);
                                  }
                          })
                  }
                  });
          })();
  </code></pre>
  
  <p>In the UI side I do see AJAX request being made periodically but issue is that the DataTables load perfectly (width/size) first time only in the browser:</p>
  
  <pre><code>Show                                                                                                                                                                                                 Search
  
  XXXXXX                                          XXXXXXXXXXXXX                             XXXXXXXXXXXX                                XXXXXXXXXXXXXX
  
  
  Showing ...                                                                                                                                                                                        Prev / Next
  </code></pre>
  
  <p>Second time onwards when AJAX response is received the DataTables just shrinks:</p>
  
  <pre><code>Show                                                                                                                                                                                                 Search
  
                                                                                    XXXXX    XXXX  XXXXX    XXXX
  
  
  Showing ...                                                                                                                                                                                        Prev / Next
  </code></pre>
  
  <p>Note the labels and data are correct but it just that the tables gets shrinked - please help to resolve the issue</p>
  
  <p>Thanks in advance.</p>
  
  <p>====================================UPDATE======================================</p>
  
  <p>I tried the below code:</p>
  
  <pre><code>oTable = $('#example').dataTable();
  (function worker() {
                          $.ajax( {
                                  "dataType": 'json',
                                  "type": "GET",
                                  "url": "/getservicevers/?data=" + QueryString.data,
                                  "async":false,
                                  "success": function (data)
                                  {
                                          alert("myObject is " + data.toSource());
                                          alert(data.aaData[0][0]);
                                          oTable.fnClearTable();
                                          for(var i = 0; i &lt; data.length; i++) {
                                              oTable.fnAddData([
                                                  data.aaData[i][0],
                                                  data.aaData[i][1],
                                                  data.aaData[i][2]
                                          ]);
                                  }
                                  },
                                  complete: function() {
                                          oTable.fnDraw();
                                          setTimeout(worker, 5000);
                                  }
                  });
          })();
  </code></pre>
  
  <p>The ourput of first two alert statements in success method of AJAX call are:</p>
  
  <pre><code>myObject is ({iTotalRecords:1, iTotalDisplayRecords:1, aaData:[[" data1", " data2", " data3"]]})
  data1
  </code></pre>
  
  <p>The code works fine but in the page I do not see any data in datatables rather:</p>
  
  <pre><code>Show                                                                                                                                                                                                 Search
  
      XXXXXX                                          XXXXXXXXXXXXX                             XXXXXXXXXXXX                                XXXXXXXXXXXXXX
  
                                           No data available in table    
      Showing ...                                                                                        
  </code></pre>
  
  <p>What I need to further on to resolve this and note that I am not see the "Loading ..." text when the AJAX request is made. Below is my comeplete code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
          &lt;title&gt;My Details&lt;/title&gt;
          &lt;meta charset='UTF-8' /&gt;
          &lt;link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" /&gt;
          &lt;script src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          $(document).ready(function() {
          var QueryString = function () {
                                                    var query_string = {};
                                                    var query = window.location.search.substring(1);
                                                    var vars = query.split("&amp;");
                                                    for (var i=0;i&lt;vars.length;i++) {
                                                      var pair = vars[i].split("=");
                                                      if (typeof query_string[pair[0]] === "undefined") {
                                                        query_string[pair[0]] = pair[1];
                                                      } else if (typeof query_string[pair[0]] === "string") {
                                                        var arr = [ query_string[pair[0]], pair[1] ];
                                                        query_string[pair[0]] = arr;
                                                      } else {
                                                        query_string[pair[0]].push(pair[1]);
                                                      }
                                                    }
                                                      return query_string;
                                            } ();
          /* Add the events etc before DataTables hides a column */
          $("thead input").keyup( function () {
                  /* Filter on the column (the index) of this element */
                  oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex(
                          oTable.fnSettings(), $("thead input").index(this) ) );
          } );
  
          /*
           * Support functions to provide a little bit of 'user friendlyness' to the textboxes
           */
          $("thead input").each( function (i) {
                  this.initVal = this.value;
          } );
  
          $("thead input").focus( function () {
                  if ( this.className == "search" )
                  {
                          this.className = "";
                          this.value = "";
                  }
          } );
  
          $("thead input").blur( function (i) {
                  if ( this.value == "" )
                  {
                          this.className = "search";
                          this.value = this.initVal;
                  }
          } );
          oTable = $('#example').dataTable();
          (function worker() {
                                  $.ajax( {
                                          "dataType": 'json',
                                          "type": "GET",
                                          "url": "/getservicevers/?data=" + QueryString.data,
                                          "async":false,
                                          "success": function (data)
                                          {
                                                  alert("myObject is " + data.toSource());
                                                  alert(data.aaData[0][0]);
                                                  oTable.fnClearTable();
                                                  for(var i = 0; i &lt; data.length; i++) {
                                                      oTable.fnAddData([
                                                          data.aaData[i][0],
                                                          data.aaData[i][1],
                                                          data.aaData[i][2]
                                                  ]);
                                          }
                                          },
                                          complete: function() {
                                                  oTable.fnDraw();
                                                  setTimeout(worker, 5000);
                                          }
                          });
                  })();
                  } );
          &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;table id="example"&gt;
          &lt;thead&gt;
                  &lt;tr&gt;
                          &lt;th&gt;Data1&lt;/th&gt;
                          &lt;th&gt;Data2&lt;/th&gt;
                          &lt;th&gt;Data3&lt;/th&gt;
                  &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tfoot&gt;
                  &lt;tr&gt;
                          &lt;th&gt;Data1&lt;/th&gt;
                          &lt;th&gt;Data2&lt;/th&gt;
                          &lt;th&gt;Data3&lt;/th&gt;
                  &lt;/tr&gt;
          &lt;/tfoot&gt;
          &lt;tbody&gt;
          &lt;/tbody&gt;
          &lt;/table&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The page in accessed from browser by following URL:</p>
  
  <p><a href="http://mybox.com/mon.html?data=test" rel="nofollow">http://mybox.com/mon.html?data=test</a></p>