Home > Back-end >  How to programmatically change current page on PrimeVue Paginator component?
How to programmatically change current page on PrimeVue Paginator component?

Time:09-21

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

enter image description here

CodePudding user response:

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