Pagination incomplete when Datatable not visibly rendered

Pagination incomplete when Datatable not visibly rendered

stefl0nstefl0n Posts: 5Questions: 2Answers: 0

Link to test case:
https://live.datatables.net/wakadino/1/edit

Description of problem:
When I create a Datatable with pagination while the Table is not visible, the Pagination lacks the links/Buttons for the single pages.

You can reproduce this using the test case above and click on the [show/hide] button. The Pagination shows as [«] [‹] [1] [›] [»]
I would expect to be [«] [‹] [1] [2] [3] [4] [5] [6] [›] [»]
When I click on the [›] Button, the rest of the Page-Buttons appear.

Can I configure the full Pagination to be rendered somehow (when hidden), or is it a bug?

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 63,205Questions: 1Answers: 10,415 Site admin
    Answer ✓

    You need to call draw() when the table is made visible: https://live.datatables.net/wakadino/2/edit .

    The issue is the Responsive pagination of DataTables 2. It can't calculate a width if the element is hidden, therefore it collapses all the way down. It will recaulcate the paging display on each draw, so a call to draw() does the job.

    Allan

  • stefl0nstefl0n Posts: 5Questions: 2Answers: 0

    OK, Then I'll make it so. Thank you Allan :)

  • stefl0nstefl0n Posts: 5Questions: 2Answers: 0

    When I use .draw() or .draw("page") the table also reloads the data (using ajax)... Can I somehow get around this ajax call?

  • allanallan Posts: 63,205Questions: 1Answers: 10,415 Site admin

    You must be using server-side processing in that case. That being the case, then no, I'm afraid there is not an option for that. Perhaps I need to look into an API option specifically for the paging buttons.

    Allan

  • DarsenDarsen Posts: 2Questions: 0Answers: 0

    Hi! I'm having same problem here

    Do you know how to solve this in Server Side? Nothing worked for me :(

  • allanallan Posts: 63,205Questions: 1Answers: 10,415 Site admin
    Answer ✓

    Have the table visible when you initialise it. That should solve the issue described above.

    Allan

  • DarsenDarsen Posts: 2Questions: 0Answers: 0

    I was fixing some things on a mate's old code (using Vue) and I didn't see that he has a v-show hiding the table until content is loaded, so deleting it fixed my problem. Thx a lot!!

Sign In or Register to comment.