Angular 9: what is the difference between these two pagination implementation?

Question

I'm new to angular and I try to create a table with pagination, the data returns from a server, so I don't want to bring all data together (because maybe I have more than thousands of rows), so which type of pagination you prefer to be good? I found out these two implementations: first:

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

second:

<mat-paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="pageEvent = $event">
</mat-paginator>

I think the second is better but I don't know how to use it. Please help me and tell me how I can bring data from server only when I change the paginator for example at the beginning it only bring me 5 rows when I go to the next page it brings me another 5 rows from the server.

If you can please give me a simple example or a link which explained as easy as enough to understand.

https://material.angular.io/components/paginator/examples -> open both examples in code (< > on the right side) and you'll see how each property is set — Lotte Lemmens, Jul 23 '20 at 12:26

score 1 · Accepted Answer · answered Jul 23 '20 at 12:27

Your implementation in table datasource is important here. You can use this pagination

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

If you want to get the data when changing pagesize, you can define the code like below.

pageIndex: number; pageSize: number;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: false }) sort: MatSort;
@ViewChild(MatTable, { static: false }) table: MatTable<any>;

ngAfterViewInit() {
    setTimeout(() => {
      this.pageIndex = this.paginator.pageIndex;
      this.pageSize = this.paginator.pageSize;
      this.paginator.page.subscribe(res => {
        this.pageIndex = res.pageIndex;
        this.pageSize = res.pageSize;
        this.getTransactions();
      });
      
      this.getTransactions();
    });
  }

 getTransactions() {
      //  Here you can get the data
      this.dataSource.getData(this.pageIndex.toString(), this.pageSize.toString()); 
      this.paginator.length = this.dataSource.dataLength;
    }

References:

https://medium.com/javascript-in-plain-english/implementing-angular-material-table-with-pagination-server-side-filtering-and-sorting-58e6a2ba4a48

Thanks for the answer! it gave me a clear thought about server side pagination, but I have some question. FIrst questio is: where is this getData comes from? in this.dataSource.getData(this.pageIndex.toString(), this.pageSize.toString()); . Is it a method which should be implemented in backend?, second question: you mean the length of dataSource by dataLength in this.dataSource.dataLength; ? — snow white, Jul 26 '20 at 06:35
getData is the service method where you will be calling the backend. Length of the datasource is dataLength here — UI_Dev, Jul 28 '20 at 11:54
If you like the answer, please upvote and accept it! It will help us to serve better — UI_Dev, Jul 28 '20 at 11:55

Angular 9: what is the difference between these two pagination implementation?

1 Answers1