mat-paginator next page disabled when is page size > 1

105 Views Asked by At

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

0

There are 0 best solutions below