Render Jumpy / table glitchy.

Render Jumpy / table glitchy.

craigmccraigmc Posts: 3Questions: 1Answers: 0

My first datatable. Works ok, but....

I have a datatable populated by a php generated html table so the data is in the DOM for SEO. It builds out the table then jumps down to size, so there is quick noticeable glitch. 400 rows.

Is there a best practice for a smoother render?
I am not strong on front end.

thanks for any ideas.

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • craigmccraigmc Posts: 3Questions: 1Answers: 0

    You can see it quickly expand then contract on load here:
    https://www.phoenix-shows.ca/psstest/rental_complete_equipment_list.php

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • solomonakinbiyisolomonakinbiyi Posts: 1Questions: 0Answers: 0
    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);
    }
    });

Sign In or Register to comment.