CODEWITHSUNDEEP
javascriptangulardatatablepaginationangular-material-table
snow white
snow white

Reputation: 71

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

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.

Upvotes: 0

Views: 238

Answers (1)

UI_Dev
UI_Dev

Reputation: 3427

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

Upvotes: 1

Related Questions