引导选项卡中的延迟加载表？

Question

我希望在“引导程序”选项卡中使用多个表，但是我也想仅加载我单击的选项卡中存在的表，并在每次同一选项卡再次激活时重新加载。 我试图在几个事件选项卡上执行此操作：单击，显示时.... 但是我无法重新加载表并销毁先前活动选项卡的表。 关于如何最好地实现我想做的事情，您有什么提示吗？

这是我的代码

<ul class="nav nav-tabs " id="onglets-principaux" role="tablist">
    <li class="nav-item active">
        <a class="nav-link " id="onglet-competences" data-toggle="tab" href="#competences" role="tab" aria-controls="competences" aria-selected="" data-entite="personne" data-langue="fr">Compétences / projets</a>
    </li>
</ul>
<div class="tab-content ml-4" id="sous-formulaires-principaux">
    <div class="tab-pane fade show active" id="competences" role="tabpanel" aria-labelledby="competences">
        <ul class="nav nav-tabs my-2 ml-4" id="sous-onglets-competences" role="tablist">
            <li class="nav-item active">
                <a class="nav-link " id="onglet-competences0__0competences" data-table="competences0__0competences0__00" data-toggle="tab" href="#competences0__0competences" role="tab" aria-controls="competences0__0competences" aria-selected="" data-entite="personne" data-langue="fr">Compétences</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " id="onglet-competences0__0projets" data-table="competences0__0projets0__01" data-toggle="tab" href="#competences0__0projets" role="tab" aria-controls="competences0__0projets" aria-selected="" data-entite="personne" data-langue="fr">Projets</a>
            </li>
        </ul>
        <div class="tab-content ml-4" id="sous-formulaires-competences">
            <div class="tab-pane fade my-2 show active" id="competences0__0competences" role="tabpanel" aria-labelledby="competences0__0competences">
                <table id="competences0__0competences0__00" class="table table-striped table-bordered dt-responsive nowrap mt-2" style="width: 100">
                    <thead>
                        <tr>
                            <th data-visible="0" >acomp_per_id</th>
                            <th data-visible="0" >acomp_comp_id</th>
                            <th data-visible="0" >acomp_per_id</th>
                            <th data-visible="0" >acomp_comp_id</th>
                            <th data-visible="1" >Identifiant de la compétence</th>
                            <th data-visible="1" >Libellé de la compétence</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="tab-pane fade my-2 " id="competences0__0projets" role="tabpanel" aria-labelledby="competences0__0projets">
                <table id="competences0__0projets0__01" class="table table-striped table-bordered dt-responsive nowrap mt-2" style="width: 100">
                    <thead>
                        <tr>
                            <th data-visible="0" >acomp_per_id</th>
                            <th data-visible="0" >acomp_comp_id</th>
                            <th data-visible="0" >acomp_per_id</th>
                            <th data-visible="0" >acomp_comp_id</th>
                            <th data-visible="0" >acomp_comp_id</th>
                            <th data-visible="1" >Libellé de la compétence</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

还有我的JS：

$(".tabs").click(function(e) {
        var tableId = $(this).data("table");
        initialiseTable(tableId);
    });
    function initialiseTable(tableId) {

        if ($.fn.dataTable.isDataTable($('#' + tableId)) == false) {
            $('#' + tableId).DataTable( {
                data:[
                        [
                            "Tiger Nixon",
                            "System Architect",
                            "Edinburgh",
                            "5421",
                            "2011/04/25",
                            "$320,800"
                          ],

                          [
                            "Rhona Davidson",
                            "Integration Specialist",
                            "Tokyo",
                            "6200",
                            "2010/10/14",
                            "$327,900"
                          ]
                        ],
                scrollY:        200,
                scrollCollapse: true,
                paging:         false
            });

            $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
        }
    }

预先感谢