更改选项卡行为会影响数据表

Question

这是以下内容的继续：DataTable.js doesn't load properly when using TABS

我的问题的建议代码如下。这个想法是在单击Tab时加载表格，并且效果很好。

$(document).ready(function() {
  $('a').on('click', function() {
    if ($(this).attr('href')) == "#Test1" && !$.fn.dataTable.isDataTable("#DT-iuyx2s7b") && !$.fn.dataTable.isDataTable("#DT-2u8iw0gr")) {
        $("#DT-iuyx2s7b").DataTable(...);
        $("#DT-2u8iw0gr").DataTable(...);
    } else if ($(this).attr('href')) == "#Test2" && !$.fn.dataTable.isDataTable("#DT-vdk1ir62")) {
        $("#DT-vdk1ir62").DataTable(...);
    }
  });
});

此后，我从此处更改了使用解决方案使用标签的方式：Hiding, unhiding content on tab changes

<div class="wrapper">
<nav class="tabs">
    <div class="selector"></div>
    <a href="javascript:void(0)" class="active" data-id="1"><i class="fas fa-burn"></i>Avengers</a>
    <a href="javascript:void(0)" data-id="2"><i class="fas fa-bomb"></i>Guardians of The Galaxy</a>
    <a href="javascript:void(0)" data-id="3"><i class="fas fa-bolt"></i>Thor</a>
    <a href="javascript:void(0)" data-id="4"><i class="fab fa-superpowers"></i>Black Panther</a>
</nav>
</div>

因此，我的href是javascript:void(0)，而我使用的是data-id。

原是：

<script>                    
    $(document).ready(function () {
        $('a').on('click', function () {
            if ($(this).attr("href") == "#Tab-g4am0hvx" && !$.fn.dataTable.isDataTable("#DT-t37rnhwq")) {
                $('#DT-t37rnhwq').DataTable({
                    "dom": "Bfrtip",
                    "buttons": [
                        "copyHtml5",
                        "excelHtml5",
                        "csvHtml5",
                        "pdfHtml5"
                    ],
                    "colReorder": true,
                    "paging": true,
                    "pagingType": [
                        "full_numbers"
                    ],
                    "lengthMenu": [
                        [
                            15,
                            25,
                            50,
                            100
                        ],
                        -1,
                        [
                            15,
                            25,
                            50,
                            100
                        ],
                        "All"
                    ],
                    "ordering": true,
                    "info": true,
                    "procesing": true,
                    "responsive": {
                        "details": true
                    },
                    "select": true,
                    "searching": true,
                    "stateSave": true
                });
            };
        });
    });            
</script>

是：

<script>                    
    $(document).ready(function () {
        $('a').on('click', function () {
            if ($(this).attr("data-id") == "Tab-plsvqbkg" && !$.fn.dataTable.isDataTable("#DT-ni5ua9gr")) {
                $('#DT-ni5ua9gr').DataTable({
                    "dom": "Bfrtip",
                    "buttons": [
                        "copyHtml5",
                        "excelHtml5",
                        "csvHtml5",
                        "pdfHtml5"
                    ],
                    "colReorder": true,
                    "paging": true,
                    "pagingType": [
                        "full_numbers"
                    ],
                    "lengthMenu": [
                        [
                            15,
                            25,
                            50,
                            100
                        ],
                        -1,
                        [
                            15,
                            25,
                            50,
                            100
                        ],
                        "All"
                    ],
                    "ordering": true,
                    "info": true,
                    "procesing": true,
                    "responsive": {
                        "details": true
                    },
                    "select": true,
                    "searching": true,
                    "stateSave": true
                });
            };
        });
    });            
</script>

每个表都相同。第一页看起来像这样：

第二页如下：

将其更改为我的“新代码”

因此，它似乎部分起作用。但是它缺少第一页中的蓝色加号。

此页面的完整来源位于：https://github.com/EvotecIT/PSWriteHTML/blob/master/Examples/Example10/Example10.html

有人看到问题出在哪里吗？也许我缺少了一些东西

编辑。

我相信这与表格越界越相关，因此不会显示加号。看来我的修复程序实际上在起作用，但是由于某些原因，第二个选项卡表超出了可见区域。