How to programmatically change current page on PrimeVue Paginator component?

Viewed 26

Can I set a current-page props on PrimeVue Paginator?

https://primefaces.org/primevue/paginator

I want to detect a query string to set current page

seems there is no props I can set?

I tried :value, :current, :current-page

no one is working, always on page 1.

enter image description here

1 Answers

You can use first to retrieve and or modify the current position. If you have one row per page :row="1", first equals page - 1.

<Paginator
    v-model:first="first"
    :rows="1"
    :total-records="10"
    />
<Button @click="first = 0">Go to page 1</Button>
<Button @click="first = 2">Go to page 3</Button>

If you are displaying more than one row per page, e.g. :row="10" you have to some math ;-) Basically: first = (page - 1) * rows

<Paginator
    v-model:first="first"
    :rows="10"
    :total-records="100"
    />
<Button @click="first = 0">Go to page 1</Button>
<Button @click="first = 20">Go to page 3</Button>
Related