数据表无法通过 JQuery-UI 选项卡正确工作

Question

我似乎对 jQuery-UI 选项卡和数据表一起工作的方式有疑问。我想创建一个可滚动且包含数据库信息的表。

当我第一次进入页面时，它看起来像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 来展示我的问题，但它基本上在那里完美运行，所以我猜问题出在我将它作为单独的页面加载的事实。
@987654323 @

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之后执行。

如果需要进一步帮助，请编辑您的帖子并添加更完整的示例。