paging controls not showing on loading

Starvision1970

Hello,
I have a DataTable where, after initial loading, the paging controls are not visible.
It's not until I do some kind of action, like sorting or changing the numbers per page, that they suddenly appear.

Any idea what can be the reason for this strange behaviour?

Thank you.

kthorngren

A link to your page or a test case would be need for us to help you debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Starvision1970

Sorry about that.
Here you go:

http://repak.cloudvisualizer.net/Catalogo/Prodotti/2

Starvision1970

By the way.
I also noticed, that the sorting glyphs are not showing when published.
This is not the case in my development environment.

Any ideas on why this is happening?

Thank you.

kthorngren

You are getting an error when loading this file from line 14:
https://cdn.datatables.net/v/bs4/dt-1.10.19/datatables.min.css

If you open it in the web browser you get this error:
An error has occurred while attempting to build this file.

Try changing the version to 1.10.18. 1.10.18 and 1.10.19 are the same version there was some packaging issues causing the 1.10.19. See this thread for more details:
https://datatables.net/forums/discussion/53777/links-not-correct-on-cdn-page#latest

Kevin

Starvision1970

Hi Kevin,

changing the version solved the glyph problem, but the pagination problem remains.
When loading the table the pagination controls doesn't show.
Only after doing some kind of interaction like sorting, does it become visible.
When I check the html, the pagination div is there, so it's a mystery to me what's going on.

kthorngren

You are getting this error in the browser's console:

jquery.dataTables.min.js:62 Uncaught TypeError: Cannot read property 'style' of undefined

The problem is you have colspan="2" in the first column of the second header.

                <thead class="thead-dark">
                    <tr style="border-bottom-width:0px;">
                        <th colspan="5" style="text-align:center">Contenitore</th>
                        <th colspan="2" style="text-align:center">Coperchi</th>
                        <th colspan="4" style="text-align:center">Optional</th>
                        <th colspan="1" class="w-50" style="text-align:center">Schede tecniche/Keyline</th>
                    </tr>
                    <tr style="border-top-width:0px;border-bottom-width:5px;">
                        <th colspan="2" class="align-middle" style="text-align:center">Gamma</th>
                        <th class="align-middle" style="text-align:center">Volume</th>
                        <th class="align-middle" style="text-align:center">Dimensioni (mm)</th>
                        <th class="align-middle" style="text-align:center">Contenitore</th>
                        <th class="align-middle" style="text-align:center">Standard</th>
                        <th class="align-middle" style="text-align:center">Membrana</th>
                        <th class="align-middle" style="text-align:center">Sigillo</th>
                        <th class="align-middle" style="text-align:center">Decorazioni</th>
                        <th class="align-middle" style="text-align:center">Manico Std</th>
                        <th class="align-middle" style="text-align:center">Manico Opt</th>
                        <th class="align-middle"></th>
                    </tr>
                </thead>

Datatbles needs a unique th to add listeners to the colspn config breaks this and causes the above error. More info can be found in the Complex Headers example. Removing the colspan and have a unique th in the second header should resolve the issue.

Kevin