Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  February 2020

  We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

  Cheers,

  Colin
• craigmc Posts: 3Questions: 1Answers: 0

  February 2020

  You can see it quickly expand then contract on load here:
  https://www.phoenix-shows.ca/psstest/rental_complete_equipment_list.php
• kthorngren Posts: 21,337Questions: 26Answers: 4,954

  February 2020

  A couple things I see, which may or may not be the problem:

  1. The big one is you are loading jquery.js twice; lines 18 and 22. This will cause problems for Datatables. You should load it only once.
  2. You are using BS 3 but loading Datatables for BS 4 integration. This may or may not cause styling issues.
  3. You don't have style="width:100%" applied to the table. My understanding is this help Datatables to properly size the columns within the container its in. An example can be seen here.

  Let us know if these don't help.

  Kevin
• kthorngren Posts: 21,337Questions: 26Answers: 4,954

  February 2020

  Took another look and noticed that the HTML version of the table is shown first with it being large and displaying all the columns. Once Datatables initializes Datatables hides the visible: false columns and the table is displayed in a smaller size. The problem seems to be the time it takes to render the page before Datatables initializes. You could hide the div the table is in and once Datatables initializes show the -div, maybe using initComplete.

  Also you should at least fix number 1 in the list above.

  Kevin
• solomonakinbiyi Posts: 1Questions: 0Answers: 0

  July 2021 edited July 2021

  kthorngren your answer concerning the initComplete solved my problem, thanks alot, thanks once again.

  I just did this at the bottom of my html page, outside the document.ready() function and it worked

  $('#example').DataTable({
  "initComplete": function(settings, json) {
  $('#table__container').fadeIn(2000);
  }
  });