I cant click to next page in table using mat-paginator even tho that there are two pages. [not-working-paginator][1] When I set page size one its working correctly. [working-paginator][2]
export class OffersComponent implements OnInit {
@ViewChild(MatPaginator) paginator!: MatPaginator;
offers: MatTableDataSource<Offer> = new MatTableDataSource<Offer>();
pageNumber = 1;
pageSize = 5;
totalPages = 0;
sortBy = 'date';
sortOptions = [
{ value: 'salary', label: 'Salary' },
{ value: 'date', label: 'Date' },
{ value: 'headline', label: 'Headline' },
];
public pages: number[] = [];
displayedColumns: string[] = ['name', 'salary', 'location', 'actions'];
constructor(private offerService: OfferService, private http: HttpClient) {}
ngOnInit(): void {
this.fetchOffers().then(() => {
this.pages = Array(this.totalPages)
.fill(0)
.map((_, index) => index + 1);
});
}
async fetchOffers() {
const url = `https://localhost:7003/api/Offers/WithFilter?pageNumber=${this.pageNumber}&pageSize=${this.pageSize}&orderBy=${this.sortBy}`;
let filter = this.offerService.getFilter();
await this.http
.post<Filter>(url, filter)
.toPromise()
.then((res: any) => {
this.offerService.setOffers(res.pagedOffers);
this.offers.data = this.offerService.getOffers();
this.totalPages = res.totalPages;
console.log(this.totalPages);
console.log(this.pageNumber);
console.log(this.pages);
});
}
handlePageEvent(event: PageEvent) {
console.log(event);
this.pageNumber = event.pageIndex + 1;
this.pageSize = event.pageSize;
this.fetchOffers().then(() => {
this.pages = Array(this.totalPages)
.fill(0)
.map((_, index) => index + 1);
});
}
onSortChange(event: any) {
this.sortBy = event.value;
this.fetchOffers().then(() => {
this.pages = Array(this.totalPages)
.fill(0)
.map((_, index) => index + 1);
});
}
}
Backend will return exact number of requested items or on last page what is left. [1]: https://i.stack.imgur.com/W2MNP.png [2]: https://i.stack.imgur.com/7JZif.png