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
Primeng Paginator
-
- Posts: 3
- Joined: 25 Jul 2023, 08:38
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:
1. In your component's TypeScript file, define the pageSize, totalRecords, and currentPage variables:
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.
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>
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);
});
}
}
-
- Information
-
Who is online
Users browsing this forum: No registered users and 8 guests