Cannot paginate with Angular Material pagination

805 views Asked by At

I use Angular Material table pagination for server side data retrieval (page by page) and my API method is working and returns necessary parameters e.g. total records. However, although I pass the length parameter to the paginator, the prev and next buttons are not enabled (I think length is set the record size of per page that is 5, instead of 15 that is the real length). Here is the methods I use:

.html:

<mat-paginator
    #paginator
    [pageSizeOptions]="paginationSizes" // "[5,10,15,20]"
    [pageSize]="defaultPageSize" // 5
    showFirstLastButtons
    [length] = "resultsLength" // it should be 16
    [pageIndex]="0"
    (page)="onPageFired($event)">
</mat-paginator>

I defined the necessary @Input and EventEmitter definitions and the necessary methods are called from base component (paginator).

ngOnInit() {
    this.getPublishers();
}

getEmployee(): void {
    this.service.getByPagination(1, 5, '1==1') // I iitially set pageNumber=1 and pageSize=5 
        .subscribe((data) => {
        this.resultsLength = data.totalCount; // it returns 16
        this.tableData = data.items; // data.items.length = 5, but setting resultsLength = 16 is enough I think
    });
}

//I use a different method for paging, but I think I wiil use the getEmployee after making pagination work
//this method is triggered by onPageFired() 
onPagingAction(event: any) {
    const index = event.pageIndex + 1;
    const size = event.pageSize;
    this.service.getByPagination(index, size, '1==1')
        .subscribe((data) => {
        this.pageSizeTest = data.totalCount;
        this.tableData = data.items;
    });
}

The first page is loaded with 5 records after page refresh, but the next button is disabled. I think the problem may caused from setting length property as 5, but not sure.

0

There are 0 answers