Mat-Table pagination disabled

Question

After implementing the server side pagination my Mat-Table, the pagination for Next,Previous,First & Last is disabled. But the Items per page dropdown works well.

Component.ts:

import { Component, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

interface USER {
  id: string;
  firstname: string;
  lastname: string;
  email: string;
  reg_date: string;
}

@Component({
  selector: 'app-server-pagination',
  templateUrl: './server-pagination.component.html',
  styleUrls: ['./server-pagination.component.css']
})
export class ServerPaginationComponent {

  ELEMENT_DATA: USER[] = [];
  isLoading = false;
  totalRows = 0;
  pageSize = 5;
  currentPage = 0;
  pageSizeOptions: number[] = [5, 10, 25, 100];

  displayedColumns: string[] = ['id', 'firstname', 'lastname', 'email', 'reg_date'];
  dataSource: MatTableDataSource<USER> = new MatTableDataSource();

  @ViewChild(MatPaginator)
  paginator!: MatPaginator;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.totalRows = this.dataSource.data.length;
  }

  ngOnInit(): void {
    //Load initial data
    this.loadData();
  }

  loadData() {
    this.isLoading = true;
    let URL = `http://localhost/database.php?pageno=${this.currentPage}&per_page=${this.pageSize}`;


    fetch(URL)
      .then(response => response.json())
      .then(data => {
        this.dataSource.data = data.rows;
        setTimeout(() => {
          this.paginator.pageIndex = this.currentPage;
          this.paginator.length = data.count;
        });
        this.isLoading = false;
      }, error => {
        console.log(error);
        this.isLoading = false;
      });
  }

  pageChanged(event: PageEvent) {
    console.log({ event });
    this.pageSize = event.pageSize;
    this.currentPage = event.pageIndex;
    this.loadData();
  }

}

HTML:

  <mat-paginator #paginator [length]="totalRows" [pageIndex]="currentPage" [pageSize]="pageSize" showFirstLastButtons
  [pageSizeOptions]="pageSizeOptions" (page)="pageChanged($event)" aria-label="Select page"></mat-paginator>

If the totalRows was the issue, i even tried to set it to static 2 and still didn't work.

Any help?

Answer 1

I might be wrong, but I think setting paginator to dataSource does not happen after you have some data in dataSource. To try set it again after fetch and might as well move fetch() to AfterViewInit as well, then you won't need to play with setTimeout().

  @ViewChild(MatPaginator)
  paginator!: MatPaginator;

  ngAfterViewInit() {
    this.loadData();
  }

  ngOnInit(): void {
    //Load initial data
  }

  loadData() {
    this.isLoading = true;
    let URL = `http://localhost/database.php?pageno=${this.currentPage}&per_page=${this.pageSize}`;


    fetch(URL)
      .then(response => response.json())
      .then(data => {
          this.dataSource = new MatTableDataSource(data.rows);
          this.paginator.pageIndex = this.currentPage;
          this.paginator.length = data.count;
          this.dataSource.paginator = this.paginator;
          this.totalRows = this.dataSource.data.length;
          this.isLoading = false;
      }, error => {
        console.log(error);
        this.isLoading = false;
      });
  }