jquery - callback for .adjust and .recalc on datatables

Question

i want to recalc and adjust my datatable after changing the dimensions of the table by a click event.

Adjusting and recalc the table without a callback works, but the content do a kind of "flipping" so first the old dimensions are visible and after the adjustment it flips to the new dimension. To prevent this, i want to add a overlay or hide the table on the start and show it again if the adjustment has done. At this point i going crazy.

Heres my code

//This works already
$(#mytableid).DataTable().columns.adjust().responsive.recalc(); 

//Now i want to add a callback and hide/show the tabele
$(#mytableid).addclass('hide');
//This code failed (also by useing .DataTable)
$(#mytableid).dataTable( {
   "drawCallback": function( settings ) {
     alert( 'now its time to show again' );
     $(#mytableid).removeclass('hide');
    }
} ).columns.adjust().responsive.recalc(); 

I recieved the error DataTables warning: table id=mytableid - Cannot reinitialise DataTable.

How i can use a callback for this or may there is another or easier way to do it?

Thanks a lot!

Answer 1

According to this, you cannot reinitialize existing datatable. One of ways to do that is to destroy existing one and then initialize again -

Working example -

var dataTable = $("#table").DataTable();
dataTable.columns.adjust().responsive.recalc();
$("#table").hide();
dataTable.destroy();
$("#table").DataTable( {
   "drawCallback": function( settings ) {
     alert( 'now its time to show again' );
     $("#table").show();
    }
} ).columns.adjust().responsive.recalc(); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/r-2.2.6/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.23/r-2.2.6/datatables.min.js"></script>
<table id="table" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>