I am having trouble with my pagination setup. I am struggling to understand how to properly pass this.total = res.totalPage; from the Component to the Service so that it can count the pages correctly. Currently, it is only displaying one page as shown in this "image reference". Below, I have provided the html, Component, and Service code to make it easier for you to follow along.
In the html code, I have only displayed a portion of the pagination.
HTML
<table
mat-table
[dataSource]="dataSource"
matSort
multiTemplateDataRows
class="mat-elevation-z8-"
>
<ng-container
matColumnDef="{{ column }}"
*ngFor="let column of columnsToDisplay | paginate: { id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total }"
><!-- -->
<ng-container *ngIf="column === 'select'; else notSelect">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
</td>
</ng-container>
<ng-container *ngIf="column.length == 11" matColumnDef="name"><!---->
<th mat-header-cell *matHeaderCellDef mat-sort-header><strong>{{ column }}</strong></th>
</ng-container>
<ng-container #headerSort><!---->
<th mat-header-cell *matHeaderCellDef><strong>{{ column }}</strong></th>
</ng-container>
<td
mat-cell
*matCellDef="let element"
(click)="open(element)"
class="pointer"
>
<p>
{{element.name}}
</p>
<p *ngIf="column.length == 7">
{{element.location}}
</p>
<p *ngIf="column.length == 6">
{{element.status}}
</p>
<p *ngIf="col length == 8">
{{date}}
</p>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr
mat-row
*matRowDef="let element; columns: columnsToDisplay"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
></tr>
<tr
mat-row
*matRowDef="let item; columns: ['expandedDetail']"
class="example-detail-row"
></tr>
</table>
<pagination-controls (pageChange)="loadAgents($event)" id="server"></pagination-controls>
Component
ngOnInit() {
this.getPage(1);
}
getPage(page: number) {
this.allService.getAllService(pageIndex).subscribe(res =>{
this.dataSource = new MatTableDataSource<AllDetails>(res['allList']);
this.total = res.totalPage;
console.log(this.total)
this.p = pageIndex;
this.dataSource.sort = this.sort;
}
}
Service
getAllService(page:number): Observable<any> {
console.log("TEST page back" +page)
const urls: string = `http://192.168.0.101:9080/project/api/listall/${orgId}`
const requestUrl: string = `${urls}/${page + 1}/desc`;
return this.http.get<AllDetails>(requestUrl).pipe(map(res => {
return {
allList: res['allList'],
noPage: res['noPage'],
totalPage: res['totalPage']
};
}));
}
The part noPage: res['noPage'] refers to the current page being displayed.
I have an example of pagination code, but I am unsure how to implement it into my current code.
Any help would be greatly appreciated.
Thank you in advance.