Topic: fullPagination dont work in mdb-datatable-2

almato free asked 1 year ago

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.) enter image description here

 <div class="mt-3">
                v-if="data.columns.length > 0"
                @selected="selectedData = $event"
                selectColor="blue lighten-4"
                focus hover hoverColor="#bbdefb" 

Bartosz Cylwik staff answered 1 year ago

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: - link to docs.

I have prepared a snippet with an example to show how it could look like:

I added those issues to our todo list. Best Regards!

almato free commented 1 year 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 1 year 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 free commented 1 year 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 1 year ago

You can use the pages event to get the array of pages. You can find more events in this section:

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.

almato free commented 1 year ago

Thank you verry mutch, helps me very much

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: 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