fullPagination dont work in mdb-datatable-2


Topic: fullPagination dont work in mdb-datatable-2

almato asked 2 years 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">
            <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
            />

Bartosz Cylwik staff answered 2 years 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:

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • 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