Topic: fullPagination dont work in mdb-datatable-2
Expected behavior I want a fullPagination-Border under my table something like that
Rows per page [10] (1) (2) (3) ... (18) << < > >>
minimum: that i can jump in one step to the end
Actual behavior I can set wat I want i get always a normal pagination
Resources (screenshots, code snippets etc.)
<div class="mt-3">
<mdb-datatable-2
v-if="data.columns.length > 0"
@selected="selectedData = $event"
v-model="data"
small
striped
multiselectable
selectColor="blue lighten-4"
bordered
arrows
:display="7"
focus hover hoverColor="#bbdefb"
ref="dataTable"
fullPagination
/>
Hi! As of fullPagination prop, apparently when display prop is greater than the number of sites that are created by datatable, it will not show the last and first page buttons.
For example: when rows per page are set to 10 and you have 55 elements in your table, :display="7" won't work and you will not see these buttons.
mdb-datatable-2 doesn't provide pagination for each site separately, but you can try to make one yourself with the pagination component:
https://mdbootstrap.com/docs/b4/vue/components/pagination/#docsTabsOverview - link to docs.
I have prepared a snippet with an example to show how it could look like: https://mdbootstrap.com/snippets/vue/b-cylwik/5017608#html-tab-view
I added those issues to our todo list. Best Regards!
almato commented 2 years ago
Hello Bartosz Thank You for your Answer, I will try it out. But Is there no way to get a First and Last page "<< < > >>"? it's because a log-table mayby holds more than 1000 Lines so it is not easy to reach the last page quickly without don't touching the order. best regards
Bartosz Cylwik staff commented 2 years ago
It should work. Try to set the display value lower or equal to the number of table pages created by the component (like for 50 elements and 10 rows per page, set it to 5). You can also remove the display prop and everything should work.
almato commented 2 years ago
The pagination Sample helps but can I get the rows per page Value out of the table ($refs) ? because i have to calculate the number of pages about this
Bartosz Cylwik staff commented 2 years ago
You can use the pages event to get the array of pages. You can find more events in this section: https://mdbootstrap.com/docs/b4/vue/tables/datatables/#docsTabsAPI.
I also edited the snippet, where I added the handlePagesEvent method that fires everytime datatable emits pages event and updates the numberOfPages value. The number of pages is displayed at the bottom.
https://mdbootstrap.com/snippets/vue/b-cylwik/5017608#js-tab-view
almato commented 2 years ago
Thank you verry mutch, helps me very much
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: MDB4 6.7.3
- Device: not relevant
- Browser: chrome
- OS: windows 10
- Provided sample code: No
- Provided link: No