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

Question

I seem to have a problem with the way jQuery-UI tabs and Datatables work together. I want to create a table that is scrollable and has information from a database.

When I enter the page for the first time it looks like this .
As you can see it looks like a normal table instead of one from Datatables.
When I reload the page again it looks like this .
This is roughly how I want it to look upon first load.

It also seems that it only works for the first table on the page.

I tested this multiple times on multiple pages with the same results.

I'm assuming this problem is because of jQuery-UI seeing as on another page it work perfectly and when I load in the page without jQuery-UI it works aswell.

This is the code:

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

The HTML is just a standard table loaded in through a while loop from a database.

To decrease loading times I've set up jQuery-UI in a way that it loads seperate files when a tab is clicked so that no unnecessary things are loaded at the start.

Any piece of help would be much appreciated thanks!

EDIT: Wanted to make a JSFiddle showcasing my problems but it basically works perfect there so I'm guessing the problem comes from the fact that I load it as seperate pages.
JSFiddle

Answer 1

I would advise the following code, expanding upon my comment.

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

You were using $(document).ready() and it is not needed. The use of $(function(){}) already causes the jQuery to execute after the page is ready .

If need further help, please edit your post and include a more complete example.