如何在同一页面重新创建数据表而不刷新页面

Question

我创建的页面有3个可切换的服务器端表，由按钮触发，按钮切换工作（如果刷新页面并单击第一个按钮，表显示，但经过点击其他按钮错误窗口弹出告诉datatable不能重新启动），所以我尝试清除第一个initiliazed表的功能，但不工作。

这里是我的

页

<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触发服务器端的表

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

添加1更多参数初始化代码只是把毁掉=真

$('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"); 
      } 
     } 
    });