0

all

I tried to implement server side paging using angular material. Version listed below

"@angular/cli": "~8.0.6",
"@angular/compiler-cli": "~8.0.3",
"@angular/language-service": "~8.0.3"
"@angular/material": "^8.2.3"

The problem is total data count 29. Paginator show 1-10 of 29 when first loaded and page size set to 10. It is normal at this time.

If I click next page button, it shows 1-10 of 10 and next, last page button disabled. It should be 11-20 of 29. I dont know what is wrong here.

Here is the code snip:

--- html ---

    <mat-paginator style="width: 100%" [length]="length" [pageIndex]="pageIndex" [pageSize]="pageSize"
    [pageSizeOptions]="pageSizeOptions" showFirstLastButtons (page)="pageChanged($event)"></mat-paginator>

--- code ---

export class myComponent implements OnInit,AfterViewInit {

  @ViewChild(MatPaginator, {static: false}) 
  paginator: MatPaginator;

  public displayedColumns: string[] = ['code', 'name', 'id', 
                                        'close', 'avg5p', 'avg20p', 'avg60p',
                                        'avg5q', 'avg20q', 'avg60q',
                                        'actions'];
  public dataSource = new MatTableDataSource();
  public type: string;
  public last_updated: string;

  length = 0;
  pageIndex = 0;
  pageSize = 10;
  pageSizeOptions = [ 10, 20 ];

  constructor(private sessionService: SessionService,private http: HttpClient,private dialog: MatDialog, private snackBar: MatSnackBar) {
    this.type = "1";
    this.dataSource.data = [];
    this.dataSource.filteredData = [];
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.getData();
  }

  getData() {
    let query = {};
    if (this.sessionService.token) {
      query['token'] = this.sessionService.token;
    }
    query['type'] = this.type;
    query['page_no'] = this.pageIndex;
    query['page_rows'] = this.pageSize;
    this.http.post(environment.api_url + "/api/myquery", query).subscribe((results:any) => {
      if ( results.api_code == 0 ) {
        this.last_updated = results.updated
        this.dataSource.data = results.data;
        this.length = results.totalRecords;
      } else {
        this.snackBar.open(this.sessionService.getMessage("SESSION_INVALID"), "", {
          duration: 3000
        });
        this.sessionService.logout();
      }
    });
  }

  pageChanged(event: PageEvent) {
    this.pageIndex = event.pageIndex;
    this.pageSize = event.pageSize;
    this.getData();
  }

}

*** Please check comment from @Eliseo for solution. Thank you Eliseo.

Vincent Chen
  • 245
  • 2
  • 6
  • 13
  • When you use "pagination-server", you **not** use `this.dataSource.paginator = this.paginator;`. see, e.g. this [SO](https://stackoverflow.com/questions/63780213/connect-method-datasource-is-not-emitting-all-paginated-rows-for-mattable/63783274#63783274) to see a mat-data-table with filter, sort and paginate that "search in a dbs". – Eliseo Feb 09 '23 at 07:07
  • Thanks for your comment, Eliseo. Afer check example link, is this true that a custom datasource object needed to implement server side pagination? The example make sense but too complex if compare to ag-grid. – Vincent Chen Feb 09 '23 at 08:00
  • 1
    @Vicent, I feel that the only you need in your code is **remove** the line: `this.dataSource.paginator = this.paginator;` (this line makes that "paginate" the data in each moment) I only show an example if you use also sort or a filter. – Eliseo Feb 09 '23 at 08:09
  • @Eliseo, pagination works fine after I comment out "this.dataSource.paginator = this.paginator;". Thank you very much. I still dont quite understand why this works throuth. – Vincent Chen Feb 09 '23 at 08:21
  • I try to explain (sorry my english). A mat-paginator can be used "standalone". That's, without relation with a MatTableDataSource. We can control the change of the pages using the event `(page)`. And this is you are using. When a mat-paginator is "relationated" with a MatTableDataSource, its property length depend on the dataSource and also when change the page, makes that the dataSource show the data. To relationate a MatTableDataSource with a mat-paginator we equal the property `paginator`of the dataSource with the paginator, if not we are using in "standalone" – Eliseo Feb 09 '23 at 08:33

1 Answers1

0

In your ts file. set length to equal to 20, not 0

length = 20;
Luigi Woodhouse
  • 332
  • 3
  • 14
  • Thanks for your answer. But this change did not solve the problem. length will be the total record count after ngAfterViewInit complete. – Vincent Chen Feb 09 '23 at 05:55
  • Good to know , thank you for pointing it out. I suppose angular material 8 has different syntax than angular material 15 – Luigi Woodhouse Feb 09 '23 at 11:49