Таблицы данных не работают корректно через вкладки JQuery-UI

Question

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

Когда я впервые захожу на страницу, она выглядит как this .
Как вы можете видеть этовыглядит как обычная таблица вместо таблицы из Datatables.
Когда я снова перезагружаю страницу, она выглядит как this .
Это примерно так, как я хочу, чтобы она выглядела при первой загрузке.

Также кажется, что это работает только для первой таблицы на странице.

Я проверял это несколько раз на нескольких страницах с одинаковыми результатами.

Я предполагаю, что эта проблемаиз-за того, что jQuery-UI видит, как на другой странице он работает отлично, и когда я загружаю страницу без jQuery-UI, он работает также.

Это код:

//jQuery-UI
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
//DataTables
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

    <script>
    $(function() {
        $('table.scrollable').DataTable({
          "scrollY": "240px",
          "scrollX": true,
          "scrollCollapse": true,
          "paging": false
        });
    });
        </script>

HTMLэто просто стандартная таблица, загружаемая через цикл while из базы данных.

Чтобы уменьшить время загрузки, я настроил jQuery-UI таким образом, чтобы он загружал отдельные файлы при нажатии на вкладку, чтобы не было необходимостивещи загружены вначало.

Любая помощь будет очень признательна, спасибо!

РЕДАКТИРОВАТЬ: Хотел сделать JSFiddle, демонстрирующий мои проблемы, но он в основном работает отлично, поэтому я 'Я предполагаю, что проблема заключается в том, что я загружаю его как отдельные страницы.
JSFiddle

Answer 1

Я бы посоветовал следующий код, расширив мой комментарий.

$(function() {
  $("#loading-voertuigen").show();

  if ($(window).width() <= 1600) {
    $('table.scrollable').DataTable({
      "scrollY": "240px",
      "scrollX": true,
      "scrollCollapse": true,
      "paging": false
    });
  } else {
    $('table.scrollable').DataTable({
      "scrollY": "240px",
      "scrollCollapse": true,
      "paging": false
    });
  }

  $(window).resize(function() {
    location.reload();
  });
});

Вы использовали $(document).ready(), и это не нужно.Использование $(function(){}) уже приводит к выполнению jQuery после того, как страница ready.

Если вам нужна дополнительная помощь, отредактируйте ваше сообщение и добавьте более полный пример.