Primeng Paginator

UI Components for Angular
Post Reply
fiterm
Posts: 1
Joined: 26 Jun 2023, 04:46

26 Jun 2023, 04:51

I am facing a trouble while using primeng paginator.
Not able to set page = 0, after my api call. I am passing page = 0 to api for reseting the data but paginator is not able to set it.

this.paginator.changePageToFirst($event) is also not working since paginator has no such events

janieserna
Posts: 3
Joined: 25 Jul 2023, 08:38

25 Jul 2023, 08:45

Hello,
To set the current page of the PrimeNG paginator to 0 after an API call, you can use the changePage method of the Paginator component. The changePage method allows you to programmatically change the current page of the paginator.

Here's an example implementation:

1. In your component's HTML file, add the p-paginator component and bind the [(page)] property to a variable in your component:

Code: Select all

<p-paginator [rows]="pageSize" [totalRecords]="totalRecords" [(page)]="currentPage"></p-paginator>
1. In your component's TypeScript file, define the pageSize, totalRecords, and currentPage variables:

Code: Select all

typescript
import { Component, OnInit, ViewChild } from '@angular/core';
import { Paginator } from 'primeng/paginator';
import { ApiService } from './api.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  @ViewChild(Paginator) paginator: Paginator;

  pageSize = 10;
  totalRecords: number;
  currentPage = 0;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.loadData();
  }

  loadData() {
    this.apiService.getData(this.pageSize, this.currentPage).subscribe((data) => {
      this.totalRecords = data.totalRecords;
      // Handle the data response here
      // ...
      // Set the current page of the paginator to 0
      this.paginator.changePage(0);
    });
  }
}
In this example implementation, the loadData method is called to fetch data from the API and update the paginator's totalRecords property. After the data is loaded, the changePage method is called on the paginator ViewChild to set the current page to 0.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests