Pagination incomplete when Datatable not visibly rendered
Pagination incomplete when Datatable not visibly rendered
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
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
OK, Then I'll make it so. Thank you Allan
When I use .draw() or .draw("page") the table also reloads the data (using ajax)... Can I somehow get around this ajax call?
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
Hi! I'm having same problem here
Do you know how to solve this in Server Side? Nothing worked for me
Have the table visible when you initialise it. That should solve the issue described above.
Allan
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!!