Basic pagination with primeNG

Question

I'm using for the first time primeNG with Angular and I need to implement a basic paginated table that will show 10 rows at the time. I managed to get the data from the API and insert them into a p-table but i can't understand how to properly show the first 10 rows of data because i implemented the onLazyLoad callback like this:

nextWarnings$: Observable<WholeEarlyWarningsPaginatedList> | undefined;


loadNextWarnings(event: TableLazyEvent) {
    if (event.rows) {
      this.nextWarnings$ = this.warningService.earlyWarningsList({
        offset: event.first + event.rows,
        limit: event.rows,
      });
    }

As you can see the problem is "+ event rows" that will eventually show the next 10 results at first (and I will lose the first 10). I think I'd need a way to understand if I'm in the first page so that i will set the offset just to: 0

This is the event i receive: https://primeng.org/table You will find it under onLazyLoad

This is the Object i created:

export interface TableLazyEvent {
  first: number;
  rows?: number;
  sortField?: string;
  sortOrder?: -1 | 1;
  filters: unknown;
  globalFilter: unknown;
  multiSortMeta: unknown;
}

Maybe there's a clever solution or a better way to implement the pagination? Thanks.

Aman Gojariya · Answer 1 · 2023-02-23T11:48:15.770

0

You need to pass event.page in API. Please try below code,

loadNextWarnings(event: TableLazyEvent) {
  if (event.rows) {
    this.nextWarnings$ = this.warningService.earlyWarningsList({
      offset: event.first == 0 ? 0 : event.first + event.rows,
      limit: event.rows,
    });
  }
}

For more details, please refer this prime-ng paginator documentation.

edited Feb 23 '23 at 11:48

answered Feb 23 '23 at 11:13

Aman Gojariya

1,289
1
9
21

I don't have the "page" field in the event i receive from the "onLazyLoad". Can you please explain how can i get it from the paginator? I updated the question with some datas, thanks Aman – Unearthly Feb 23 '23 at 11:24
@Unearthly I've update my answer. Please try this – Aman Gojariya Feb 23 '23 at 11:48
Unfortunately it doesn't work because when I click on the second page i get "20" instead of "10". Actually I didn't think about it, but it looks like it's working without the "+ event.rows" part since that's the offset of "10" that makes the error. – Unearthly Feb 23 '23 at 15:16

Basic pagination with primeNG

1 Answers1