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来展示我的问题，但是它在那里基本上可以正常工作，所以我猜问题出在我将其作为单独的页面加载的事实。
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之后执行。

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

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

1 个答案: