How to programmatically change current page on PrimeVue Paginator component?

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.

Zygapophysis

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

Protohuman

it works! I still don't understand the reason, but I will study further. thanks for replying and edit the question, some user.🥺 – Zygapophysis

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>

Homelike

Answer 3

I managed to solve the problem by doing the following code, remembering that the page variable has an initial value of 1

<Paginator
        @page="onPage($event)"
        :rows="10"
        :pt="{
          root: (event) => {
            const itemForPage =  10;
            const currentPage =  this.page - 1;
            event.state.d_first = itemForPage * currentPage;
          },
        }"
        v-model:totalRecords="totalPage"> 

Commonage

Answer 4

This is what I did.

• Add v-model:first="offset" to datatable tag.
• Make offset reactive by const offset = ref(0);
• Then put this code on the onMounted hook.

onMounted(() => {
    loadDataFromProp();
    const url = new URL(location.href);
    const page = url.searchParams.get('page');
    offset.value = (dt.value.rows * page ?? 1) - 1;
});

Womack