Pagination renders all rows in large table while loading

Hi,

thanks for your question, and sorry for the trouble.

I see what you mean, and the cause for this simply is that the JavaScript code for the pagination (and the other JS features) is only loaded and executed after the full HTML tables has been loaded. Running that JS then take a few milliseconds, so that the full table will be visible for a few moments.

Hiding those rows with display: none; is not a good choice for all situations, as the table would then for example not be complete for users who have JavaScript turned off, or where the JS on the site is broken.

You could however indeed experiment with setting the table to display: none in some “Custom CSS” and then showing it again with some JavaScript that runs immediately, when it’s finished loading, e.g. in the DataTables initComplete hook.

Regards,
Tobias

Is there an easy way to do the custom CSS you describe? Looking at the rows it seems that they all have a custom class name (e.g. “row-234”), and to get this working I’d have to add a CSS entry for every row above 100…which seems excessive.

It seems to me the best solution is to just have a tiny bit of javascript that loads before the table is loaded that will hide the extra rows, if the user doesn’t have javascript enabled this hiding will never occur.

Hi,

Sorry for the long wait for a reply. As a I was on a long vacation without internet access the last couple weeks, I could not reply earlier.

I wouldn’t really hide the rows here with CSS/JS, as that can indeed be long CSS. Also, the DataTables JS library already does it.
I would do it directly on the <table> element, which has a .tablepress-id-123 class.

Regards,
Tobias