fullPagination dont work in mdb-datatable-2

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">
            <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
            />

Add comment

Bartosz Cylwik staff answered 1 year ago

0 0 Best answer

Hi! As of <code>fullPagination</code> prop, apparently when <code>display</code> prop is greater than the number of sites that are created by datatable, it will not show the <code>last</code> and <code>first</code> page buttons.

For example: when rows per page are set to <code>10</code> and you have <code>55</code> elements in your table, <code>:display="7"</code> won't work and you will not see these buttons.

<code>mdb-datatable-2</code> doesn't provide pagination for each site separately, but you can try to make one yourself with the <code>pagination</code> component:

<a href="https://mdbootstrap.com/docs/b4/vue/components/pagination/#docsTabsOverview" target="_blank">https://mdbootstrap.com/docs/b4/vue/components/pagination/#docsTabsOverview</a> - link to docs.

I have prepared a snippet with an example to show how it could look like:
<a href="https://mdbootstrap.com/snippets/vue/b-cylwik/5017608#html-tab-view" target="_blank">https://mdbootstrap.com/snippets/vue/b-cylwik/5017608#html-tab-view</a>

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

Please insert min. 20 characters.

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

Please insert min. 15 characters.

almato free commented 1 year ago

Thank you verry mutch, helps me very much

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Opened

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

almato

0Support score
5Questions 2Answers 0Snippets