Reputation: 259
I am working with a project Using WordPress API in Angular 5. And I used material grid as well as filtering and pagination. I am facing problem of indexing, like i have total 100 entries but i want to show 50 in single page. When I clicked next the next 50 entries shows in grid but index number again start from 1 to 50 instead of 51 to 100. How to get last page index number and concatenate with next.
Filtering
<div class="example-header">
<mat-form-field>
<input matInput type="text" placeholder="Component" aria-label="Number" [matAutocomplete]="autocom" #component>
<mat-autocomplete #autocom="matAutocomplete" (optionSelected)="dropDown($event.option.value,region.value,sector.value,stats.value,page)">
<mat-option [value]="" style="font-size: 14px;">
ALL
</mat-option>
<mat-option *ngFor="let option of options" [value]="option" style="font-size: 14px;">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field>
<input matInput type="text" placeholder="Region" aria-label="Number" [matAutocomplete]="autoreg" #region>
<mat-autocomplete #autoreg="matAutocomplete" (optionSelected)="dropDown(component.value,$event.option.value,sector.value,stats.value,page)">
<mat-option [value]="" style="font-size: 14px;">
ALL
</mat-option>
<mat-option *ngFor="let option of regions" [value]="option" style="font-size: 14px;">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<div>
Pagination
<mat-paginator #pagination [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = dropDown(component.value,region.value,sector.value,stats.value,$event)"
#page>
</mat-paginator>
component.ts
pageEvent: PageEvent;
totalPageSize = 1;
length: number;
pageIndex: number = 1;
pageSize: number = 100;
pageSizeOptions: number[] = [10, 25, 50, 100];
loadData() {
this.spinnerService.show();
this.subscription = this.grantsearchservice.getStarterApi(this.component, this.region, this.sector, this.stats, this.pageIndex, this.pageSize)
.subscribe(
(grantsearch: any) => {
this.grantsearchs = grantsearch.body;
this.dataSource = new MatTableDataSource(this.grantsearchs);
this.totalPageSize = grantsearch.headers.get('X-WP-TotalPages');
this.setPagination(grantsearch.headers.get('x-wp-total'), this.pageIndex, this.pageSize);
this.spinnerService.hide();
}
);
}
Upvotes: 3
Views: 5848
Reputation: 58019
I must supouse you have some like
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
Just change {{element.position}} by {{element.position+pageSize*(pageIndex-1)}}
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position+pageSize*(pageIndex-1)}}
Upvotes: 2