Pagination in PrimveVue Datatable not showing the correct page links

Question

I am using pagination (primevue.org/paginator) in primevue datatable as it:

<DataTable ref="dt" :value="dataItems" dataKey="id" :loading="loading1" :paginator="true" :totalRecords="50" :rows="5" :pageLinkSize="50" @page="handlePagination">

What its Doing

I have set totalRecords="50" and :rows="5" It shows no link to next/prev pages if server returns 5 data rows.

if server return 10 rows, then it is showing 2 page links in pagination bar and so on...

What it should do

There should be page links based on totalCount from server e.g :totalRecords="50"

For example, i If server return totalCount=50 then it should show 10 page links in pagination bar and 5 data rows on each page so If user click on page 2, 3, 4... the request should go to server to fetch the related page data.

Event Data on clicking the page link

{ "originalEvent": { "page": 1, "first": 4, "rows": 4, "pageCount": 2 }, "first": 4, "rows": 4, "sortField": null, "sortOrder": null, "multiSortMeta": [], "filters": {}, "pageCount": 2, "page": 1 }

What changes should I made to generate links according to totalRecords so I can send request to server to get other pages data as well.

Is it possible with https://primevue.org/paginator

Does this doc solve your problem?

init-qy
– init-qy

2023-10-16 02:24:49 +00:00
Commented Oct 16, 2023 at 2:24 — init-qy
– init-qy, Commented Oct 16, 2023 at 2:24

user1512622 · Accepted Answer · 2024-08-18 19:42:29Z

3

You must add the prop "lazy" to the DataTable to indicate that you are loading data from a remote datasource. For some reason, the PrimeVue documentation for lazy loading is missing for the DataTable component but is present for TreeTable (see here).

<DataTable :value="dataFromApi" :lazy="true" :paginator="true" :rows="rows" :loading="loading" @page="onPage" :totalRecords="totalRecords">
  <Column field="name" header="Name" expander></Column>
  <Column field="size" header="Size"></Column>
  <Column field="type" header="Type"></Column>
</DataTable>

answered Aug 18, 2024 at 19:42

user1512622

312 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pagination in PrimveVue Datatable not showing the correct page links

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related