Изменение поведения вкладок, влияющих на таблицы данных

Question

Это немного продолжение: DataTable.js не загружается должным образом при использовании TABS

Предлагаемый код для моей проблемы был, как показано ниже.Идея состоит в том, чтобы загрузить таблицу, когда нажата вкладка, и она прекрасно работает.

$(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(...);
    }
  });
});

С тех пор я изменил то, как я работаю с вкладками, используя решение, отсюда: Скрытие, отображение содержимого вкладок на изменениях

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

Итак, мой hrefjavascript: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

Кто-нибудь видит, в чем проблема?может быть, я что-то упускаю

РЕДАКТИРОВАТЬ.

Я считаю, что это больше связано с выходом таблицы за пределы, поэтому знак плюс не появляется.Казалось бы, мое исправление действительно работает, но по какой-то причине таблица второй вкладки выходит за пределы видимой области.