javascript - 生成 1 个可切换表，而不是 1 页上的 3 个表

Question

我创建了 1 个页面，其中有 3 个由按钮触发的可切换表，我使用数据表作为表插件。

现在我成功地在 1 个页面上通过按钮触发了 3 个可切换的服务器端表，从最终用户的 Angular 来看，它看起来很棒并且功能齐全，但是在控制台中时，页面总是触发 3 个相同的表而不是 1 个表。

我不担心表生成的小数据，但到时候数据会堆积到1000+数据，三次生成1000+数据就太可笑了。

这是我的页面片段:

<div class="panel-body">
   <ul class="nav nav-tabs alert col-md-12" id="myTab">
      <hr class="style14">
      <h4 class="header text-center col-md-8" id="texthead">Asset List</h4>
      <a class="btn btn-group btn-primary btn-sm changeTable" data-ajax="tableresponses.php" href="#table_asall" data-toggle="tab" onclick="changeText('All Assets Table')">All Assets</a>
      <a class="btn btn-group btn-primary btn-sm changeTable" data-ajax="tableresponses1.php" href="#table_asborrow" data-toggle="tab" onclick="changeText('Used Assets Table')">Used Assets</a>
      <a class="btn btn-group btn-primary btn-sm changeTable" data-ajax="tableresponses2.php" href="#table_asbroken" data-toggle="tab" onclick="changeText('Damaged Assets Table')">Damaged Assets</a>
      <hr class="style14">
   </ul>
   <div class="tab-content">
      <div id="table_asall" class="tab-pane fade active in"  >
         <div class="table-responsive wrap">
            <table class="display" width="100%" cellspacing="0" >
                //*table code
            </table>
         </div>
      </div>
      <div id="table_asborrow" class="tab-pane fade">
         <div class="table-responsive">
            <table class="display" width="100%" cellspacing="0">
               //*table code
            </table>
         </div>
      </div>
      <div id="table_asbroken" class="tab-pane fade">
         <div class="table-responsive">
            <table class="display" width="100%" cellspacing="0" id="">
               //*table code*
            </table>
         </div>
      </div>
   </div>
</div>

这是我的 js(生成了 3 个表)

var _ajaxURL = ""; 

$('.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,
        "destroy": true,
        "sAjaxSource": _ajaxURL
    });

    $.fn.dataTable.ext.errMode = function ( settings, helpPage, message ) { 
    console.log("Catch Error : Success");
    };

    function testUpdatedDatatable() {
        $('table.display').DataTable().clear().rows.add(response.url).draw();
    }
});

因此，如果您检查 $('table.display').DataTable({ 生成 3 个表的主要问题。

如何只能生成1个表而不是3个表？

Answer 1

您可以有 3 个不同的 php 文件，每个文件包含一个表。然后根据您需要的女巫表使用包含函数