CODEWITHSUNDEEP
angularangular5angular2-formsangular-material2
Naeem Hussain
Naeem Hussain

Reputation: 259

Pagination index Number in Angular 5

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

Answers (1)

Eliseo
Eliseo

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

Related Questions