javascript - 如何在不刷新页面的情况下重新初始化同一页面中的数据表

Question

我创建的页面有3个由按钮触发的可切换服务器端表，按钮开关工作(通过刷新页面并单击第一个按钮，表显示，但单击其他​​按钮后错误窗口弹出告诉数据表无法重新初始化来证明)所以我尝试了清除第一个初始化表的功能，但不起作用。

这是我的页面

<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 个参数，只需将 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");
            }
        }
    });