vue.jspaginatorprimevue

How to programmatically change current page on PrimeVue Paginator component?


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


Solution

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