how to reinitiliase datatables in same page without refreshing the page

Question

I create page that have 3 switchable server-side table triggered by button, button switch working (proved by if refreshed the page and click first button, table shows up, but after click other button error windows popout tells datatable cant reinitiliazed) so I tried function that clear first initiliazed table, but not working.

here's my page

<div class="panel-body">
<div class ="row">
   <div class ="text-center alert col-md-12">
      <a class="btn btn-primary" href="#table_assall" data-toggle="tab">All Assets List</a>
      <a class="btn btn-primary" href="#table_asborrow" data-toggle="tab">Used Assets</a>
      <a class="btn btn-primary" href="#table_asbroken" data-toggle="tab">Damaged Assets</a>
   </div>
</div>
<div class="tab-content">
   <div id="table_assall" class="tab-pane fade active in">
      <div class="table-responsive">
         <table class="display" width="100%" cellspacing="0" id="">
            *thead source code*
         </table>
      </div>
   </div>
   <div id="table_asborrow" class="tab-pane fade">
      <div class="table-responsive">
         <table class="display" width="100%" cellspacing="0" id="">
            *thead source code*
         </table>
      </div>
   </div>
   <div id="table_asbroken" class="tab-pane fade">
      <div class="table-responsive">
         <table class="display" width="100%" cellspacing="0" id="">
            *thead source code*
         </table>
      </div>
   </div>
</div>

-JS file that trigger serverside table

var _ajaxURL = "tableresponses.php"; //you can initialize this global variable with some default value.

$('.changeTable').on('click', function() {
    _ajaxURL = $(this).attr('data-ajax');

    $('table.display').DataTable({
        lengthChange: true,
        info: false,
        fixedHeader: true,
        select: true,
        "bAutoWidth": false,
        "bProcessing": true,
        "serverSide": true,
        "ajax": {
            url: _ajaxURL, // json datasource
            type: "post", // type of method  , by default would be get
            error: function() { // error handling code
                $("#astab_processing").css("display", "none");
            }
        }
    });

    function testUpdatedDatatable() {
        $('table.display').DataTable().clear().rows.add(response._ajaxURL).draw();
        console.log('#running');
    }
});

Answer 1

add 1 more argument to your initialization code just put destroy = true

 $('table.display').DataTable({
        lengthChange: true,
        info: false,
        fixedHeader: true,
        select: true,
        "bAutoWidth": false,
        "bProcessing": true,
        "serverSide": true,
        "destroy": true,
        "ajax": {
            url: _ajaxURL, // json datasource
            type: "post", // type of method  , by default would be get
            error: function() { // error handling code
                $("#astab_processing").css("display", "none");
            }
        }
    });