jQuery AJAX call function on timeout
<p>I am trying to reload my jQuery DataTables without refreshing the page in an attempt to capture new data.</p>

<p>Here is my initial ready function that begins the process:</p>

<pre><code> $(document).ready(function()
 {
   $.ajax({
     url:'api/qnams_all.php',
     type:"GET",
     dataType:"json"
   }).done(function(response) {
       console.log(response.data);
       renderDataTable(response.data)
   }).fail(function() {
       alert( "error" );
   }).always(function() {
       alert( "complete" );
   });  
 });
</code></pre>

<p>I'm sending the data to this function:</p>

<pre><code> function renderDataTable(data)
 {
   var $dataTable = $('#example1').DataTable({
     "data": data,
     "iDisplayLength": 25,
     "order": [[ 6, "desc" ]],
     "bDestroy": true,
     "stateSave": true
     // there's some more stuff, but I don't think necessary to show
   });
 }
</code></pre>

<p>I'm trying to utilize the answer found here: <a href="https://stackoverflow.com/questions/30254977/how-to-refresh-table-contents-in-div-using-jquery-ajax">How to refresh table contents in div using jquery/ajax</a></p>

<p>As follows:</p>

<pre><code> setTimeout(function(){
   $( "#example1" ).load( "mywebpage.php #example1" );
 }, 2000);
</code></pre>

<p>Using all of the above code, when the page first loads, it looks like this:</p>

<p><a href="https://i.stack.imgur.com/BB8XR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BB8XR.jpg" alt="when the page first loads"></a></p>

<p>But after the refresh, it looks like this:</p>

<p><a href="https://i.stack.imgur.com/Y0s0p.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y0s0p.jpg" alt="after refresh"></a></p>

<p>The picture immediately above does indeed reload without the page refreshing, but I'm not sure why it looks like the picture above.</p>