如何以编程方式更改 PrimeVue Paginator 组件上的当前页面？

Question

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.

Answer 1

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

Answer 2

Just realized that you need to actually tell the Paginator how much you want to skip, not the math to calculate the current page .

<Paginator
    :rows="movieStore.movieLimitCount"
    @page="onPaginate"
    :totalRecords="movieStore.movieCount"
    class="mt-5"
    :alwaysShow="false"
    v-model:first="offset"
  />

<script setup>
const offset = ref(0);
const onPaginate = (e) => offset.value = e.rows * e.page;
</script>