Angular material 2 - mat-paginator [length] issue

4
votes

I am trying to use the mat-paginator for a table where I want to show data retrieved via an HTTP call, but the problem I have is that I cannot set the length of the paginator to the total number of the results I get from the API. In this example, the length is hardcoded in the component, but it shoudn't be a problem (I tried also to set it on the view as [length]="100" and it doesn't work). Here is the HTML:

<mat-table #table1="matSort" [dataSource]="dataSource1" matSort>

   <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef>
            <mat-checkbox name="all" class="" [checked]="isAllChecked()" (change)="checkAll($event)" *ngIf="bulkView"></mat-checkbox>
        </mat-header-cell>
        <mat-cell *matCellDef="let element"> 
            <mat-checkbox class="" [checked]="isAllRowsSelected" [(ngModel)]="element.state" *ngIf="bulkView"></mat-checkbox>
        </mat-cell>
   </ng-container>

    <ng-container matColumnDef="firstName">
        <mat-header-cell *matHeaderCellDef mat-sort-header="CompanyAgent"> First name </mat-header-cell>
        <mat-cell *matCellDef="let element">
            <img class="personal-data-table__img" src="/assets/app/media/img/users/100_3.jpg" alt="user" width="50" />
                {{element.firstName}} 
        </mat-cell>
    </ng-container>

    <ng-container matColumnDef="lastName">
        <mat-header-cell *matHeaderCellDef mat-sort-header="CompanyEmail"> Last name </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.lastName}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="city">
        <mat-header-cell *matHeaderCellDef mat-sort-header="Website"> City </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.city}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="actions">
        <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
        <mat-cell *matCellDef="let element"> 
            <span class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill"> 
                <i class="la la-ellipsis-h"></i> 
            </span>
            <span class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" (click)="editPersonalDataItem(element.RecordID)">
                <i class="la la-edit"></i>                      
            </span>
            <span class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill"> 
                <i class="la la-trash"></i> 
            </span>
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

<mat-paginator #paginator1
    [length]="pag1.pageLength"
    [pageSize]="pag1.pageSize"
    [pageSizeOptions]="pag1.pageSizeOptions"
    [pageIndex]="pag1.pageIndex"
    (page)="onPaginateChange1($event)">
</mat-paginator>

and the component:

pag1 = {
    pageSize: 10,
    pageSizeOptions: [5, 10, 20],
    pageIndex: 0,
    pageLength: 100
  };

@ViewChild('paginator1') paginator1: MatPaginator;

this.route.data.subscribe(data => {
    this.personalData = data.users.data.persons;
    this.dataSource1 = new MatTableDataSource(this.personalData);
    this.dataSource1.paginator = this.paginator1;
    console.log('this.paginator1: ', this.paginator1);
});

When I console.log this.paginator1, I can see the _length set to 100, but when I open the object, I see the value which is displayed in the browser (10).

enter image description here

The data is displaying fine in the browser, the only problem I have is that the paginator always shows 1-10 of 10 and I want it to show 1-10 of x, where x is the value I get from the API for the total number of items. Please advise. Thanks!

4
angularangular-material

4 Answers

6
votes

This comment by @user4676340 is the right answer to this question:

Oooooooooooooh I didn't get that you had a pagination in the back-end, not the front-end ! Sorry, my bad. In this case, your first guess was right, except for one thing : you should not bind your paginator to your table. Because in your case, the paginator has nothing to do with your table, it only handles the data. My guess is that this binding to the table is the issue here

(I don't have privilege to convert that comment to an answer so this is what it is)

6
votes

This worked for me

<mat-paginator  [length]="length" (page)="getServerData($event)" #paginator [pageSizeOptions]="[5, 10, 20, 50]" showFirstLastButtons></mat-paginator>

Add line

this.length = count;

and remove line

this.dataSource1.paginator = this.paginator1;
1
votes

I advise you to take a look at the internationalization of the paginator. I will save you the research time, here is how you do it : 

import { MatPaginatorIntl } from '@angular/material';
export class MatPaginatorI18n extends MatPaginatorIntl {
  itemsPerPageLabel = 'Lines per page';
  nextPageLabel = 'Next page';
  previousPageLabel = 'Previous page';
  getRangeLabel = (page: number, pageSize: number, totalResults: number) => {
    if (!totalResults) { return 'No result'; }
    totalResults = Math.max(totalResults, 0);
    const startIndex = page * pageSize;
    // If the start index exceeds the list length, do not try and fix the end index to the end.
    const endIndex =
      startIndex < totalResults ?
        Math.min(startIndex + pageSize, totalResults) :
        startIndex + pageSize; return `${startIndex + 1} - ${endIndex} sur ${totalResults}`
      ;
  }
}

In your module, remember to import you custom provider : 

providers: [
  { provide: MatPaginatorIntl, useClass: MatPaginatorI18n }
]
1
votes

Answer found here https://github.com/angular/components/issues/10526

Just remove this.tableDataSource.paginator = this.paginator; and definition of paginator from ts.