title: Jquery table.destroy doesn't work the first time on fire click
body: <p>HTML code:</p>
  <pre><code>&lt;!-- Devices List Navbar Menu --&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
  &lt;a href=&quot;#&quot; class=&quot;navbar-nav-link&quot; id=&quot;deviceSearch&quot;&gt;&lt;i class=&quot;icon-search4 pr-1&quot;&gt;&lt;/i&gt; Devices&lt;/a&gt;
  &lt;/li&gt;  &lt;!-- END Devices List Navbar Menu --&gt;
  </code></pre>
  <p>Javascript code:</p>
  <pre><code>$(document).ready( function () {
      var alarmTable = $('#alarm_datatable').DataTable({
          //do staff
      });
  
      $(&quot;#deviceSearch&quot;).click(function(){
          alarmTable.destroy();
      });
  }); 
  </code></pre>
  <p>The problem is that the table is destroyed only after the second click of the link with id &quot;deviceSearch&quot;. The behavior is the same whether the click function is in or out of <code>$(document).ready</code></p>
  <p>At the first click the table header disappears, and at the second click the datatable disappears.</p>
  <p>Could you help me why this happens and how to solve it?</p>