CODEWITHSUNDEEP
angulartypescriptangular-materialmat-table
Dani
Dani

Reputation: 43

MatPaginator angular material : How can i know if i am in the last page in the table?

i have to do the next : let's assume that I have a table with 20 records, and i show them in 5, in the next page another 5 records and etc. So i want to know a way when i am in the last page, call in my API, another 20 records and show them in the table.

I have tried it but I have not been successful. I am using angular material

this is my code html

<div class="col-12 col-md-6 text-right float-right">
  <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Buscador" upperCase>
  </mat-form-field>
</div>


<table mat-table [dataSource]="usuarios" class="mat-elevation-z8" matSort>

  <ng-container matColumnDef="Cedula">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Cedula"> Cedula </th>
    <td mat-cell *matCellDef="let user">{{ user?.Cedula }}</td>
  </ng-container>

  <ng-container matColumnDef="Nombres">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Nombres"> Nombres </th>
    <td mat-cell *matCellDef="let user">{{ user?.Nombres }}</td>
  </ng-container>

  <ng-container matColumnDef="Apellidos">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Apellidos"> Apellidos </th>
    <td mat-cell *matCellDef="let user">{{ user?.Apellidos }} </td>
  </ng-container>

  <ng-container matColumnDef="Email">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Email"> Email </th>
    <td mat-cell *matCellDef="let user">{{ user?.Email }} </td>
  </ng-container>

  <ng-container matColumnDef="Contacto">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Contacto"> Contacto </th>
    <td mat-cell *matCellDef="let user">{{ user?.Contacto }} </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="pageSize" (page)="pageEvent = handlePage($event)" showFirstLastButtons></mat-paginator>

TS

    @Component({
  selector: 'app-asignar-reclamacion',
  templateUrl: './asignar-reclamacion.component.html',
  styleUrls: ['./asignar-reclamacion.component.scss']
})
export class AsignarReclamacionComponent implements OnInit {

  //atributos
  displayedColumns: string[] = ['Cedula', 'Nombres', 'Apellidos', 'Email', 'Contacto'];
  usuarios = new MatTableDataSource([]);
  pageSize: number[] = [3];
  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: false }) sort: MatSort;
  //listUsuarios:User[]= []
  pageEvent: PageEvent;

  constructor(private activatedRoute: ActivatedRoute,private userService : UserService) { }

  ngOnInit(): void {
    this.activatedRoute.data.subscribe((data) => {
      console.log(data)
      this.usuarios = new MatTableDataSource(data.usuarios.page);
    })

    

  }

  // pageEvent(event){
  //   console.log(event)
  // }

  ngAfterViewInit(): void {
    this.usuarios.sort = this.sort;
    this.usuarios.paginator = this.paginator;
    console.log(this.paginator)
  }

  handlePage(event){
    let size = event.length
    let lastPage = event.pageIndex;
    if(lastPage + 1 == size){
      console.log("ultima pagina")
    }


    console.log(event)
  }
  

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
    this.usuarios.filter = filterValue;
    if(this.usuarios.filteredData.length == 0){
      this.searchDB(filterValue)
    }
    console.log(this.usuarios.filteredData)
  }

  searchDB(text:string) {
    this.userService.getUserDataFilter(text).subscribe((data)=>{
      console.log(data)
    })
  }



}

Upvotes: 1

Views: 1851

Answers (1)

Tushar
Tushar

Reputation: 2078

To check if you are in the last page of the table, you have to check if the table has next page or not.

By using (page) event that exist on <mat-paginator></mat-paginator>, you can check if table having next page or not.

Example:

In your html:

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" (page)="onPaginateChange($event)"></mat-paginator>

In your ts:

onPaginateChange(event) {
    console.log(this.dataSource.paginator.hasNextPage());
    console.log(event);
}

The above hasNextPage() function will returns false if table not having a next page, and in that case you can load more data.

Upvotes: 1

Related Questions