Jquery table.destroy 在第一次着火点击时不起作用

Question

HTML code:

<!-- Devices List Navbar Menu -->
<li class="nav-item">
<a href="#" class="navbar-nav-link" id="deviceSearch"><i class="icon-search4 pr-1"></i> Devices</a>
</li>  <!-- END Devices List Navbar Menu -->

Javascript code:

$(document).ready( function () {
    var alarmTable = $('#alarm_datatable').DataTable({
        //do staff
    });

    $("#deviceSearch").click(function(){
        alarmTable.destroy();
    });
}); 

The problem is that the table is destroyed only after the second click of the link with id "deviceSearch". The behavior is the same whether the click function is in or out of $(document).ready

At the first click the table header disappears, and at the second click the datatable disappears.

Could you help me why this happens and how to solve it?

Answer 1

you have to precise true to remove completely the datatable:

$("#deviceSearch").click(function(){
    alarmTable.destroy(true);
});

Completely remove the table from the DOM (true) or leave it in the DOM in its original plain un-enhanced HTML state (default, false).