title: refresh/reload Datatable by button click event
body: <p>One more question of many more questions to come. I'm working with <code>Jquery</code> <code>Datatable</code> and now want to refresh/reload that table by simply clicking a bootstrap button below that table. Sound easy. I have to admit it must be easy but somehow I cannot find any help that works for me on here referring to this little issue. That's what I have so far:</p>
  
  <p><a href="https://i.stack.imgur.com/iKh5E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iKh5E.png" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="table table-striped table-hover droplist"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;#&lt;/th&gt;
                          &lt;th&gt;Filename&lt;/th&gt;
                          &lt;th&gt;Size[bytes]&lt;/th&gt;
                          &lt;th&gt;Image&lt;/th&gt;
                          &lt;th&gt;Type&lt;/th&gt;
                          &lt;th&gt;Added&lt;/th&gt;
                          &lt;th&gt;Delete&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
          &lt;?php 
                  $statement = $pdo-&gt;prepare("SELECT * FROM file_upload ORDER BY id");
                    $result = $statement-&gt;execute();
                      $count = 1;
                      while($row = $statement-&gt;fetch()) {
                          echo '&lt;tr name="'.$row['name'].'"&gt;';
                          echo "&lt;td&gt;".$count++."&lt;/td&gt;";
                          echo "&lt;td&gt;".$row['name']."&lt;/td&gt;";
                          echo "&lt;td&gt;".$row['size']."&lt;/td&gt;";
                          echo '&lt;td&gt;&lt;img src="'.$row['link'].'" alt="'.$row['name'].'" height="auto" width="100%"&gt;&lt;/td&gt;';
                          echo "&lt;td&gt;".$row['type']."&lt;/td&gt;";
                          echo "&lt;td&gt;".date('d.m.Y H:i:s',strtotime($row['date']))."&lt;/td&gt;";
                          echo '&lt;td&gt;&lt;a class="delete" href="#" data-artname="'.$row['name'].'"&gt;&lt;i class="fa fa-trash" &gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;';
                          echo "&lt;/tr&gt;";
                      }
                  ?&gt;
              &lt;/table&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function() {
      "use strict";
      var table = $('.droplist').DataTable({
              responsive: true,
          // "scrollY":        "100px",
          // "scrollCollapse":  true,
              "paging":         true,
          //  "pagingType": "full_numbers"
          }
  
      });
  
      // Refresh datatable by clicking the refresh button (no auto refresh)
  
      $("#refreshbtn").on('click', function() {
  
      //          table.fnClearTable();
      //          table.fnDestroy();
      //          table.fnDraw();
  
      $("#refreshbtn").html('&lt;i class="fa fa-refresh fa-spin"&gt;&lt;/i&gt;   updating ...');
  
      setTimeout(function (){
            $("#refreshbtn").html('&lt;i class="fa fa-refresh"&gt;&lt;/i&gt;   Refresh ');
            }, 3000);
      });
  </code></pre>
  
  <p>It doesn't work for me with either <code>fnDestroy</code>, <code>fnDraw</code>, <code>fnClearTable</code> or <code>fnReloadAjax</code>. I've tried all of them. That really odd.</p>