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

Posted 2023-05-09

【中文标题】数据表无法通过 JQuery-UI 选项卡正确工作

【英文标题】：Datatables not correctly working through JQuery-UI Tabs

【发布时间】：2019-03-10 22:00:45

【问题描述】：

我似乎对 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 @

【问题讨论】：

这段代码有很多可疑的问题。您能否提供一个最小、完整且可验证的示例：***.com/help/mcve

【参考方案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之后执行。

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

【讨论】：

感谢您的提示。试着让代码更清晰更小