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

Question

我创建的页面有 3 个由按钮触发的可切换服务器端 table，按钮开关有效（如果刷新页面并单击第一个按钮，table 会显示，但单击后其他按钮错误 windows 弹出窗口告诉数据 table 无法重新初始化）所以我尝试了清除首先初始化的功能 table，但没有工作。

这是我的页面

<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文件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

在您的初始化代码中再添加 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");
            }
        }
    });

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

how to reinitiliase datatables in same page without refreshing the page

javascript

jquery

datatables

datatables-1.10