Question

我创建的页面有3个可切换的服务器端表，由按钮触发，按钮开关工作（如果刷新页面并点击第一个按钮，表格显示，但点击其他按钮后错误窗口popout告诉datatable cant reinitiliazed）所以我尝试了清除第一个初始化表的功能，但没有工作。

这是我的页面

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

如何在不刷新页面的情况下重新启动同一页面中的数据表

1 个答案: