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.

Answer 1

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.