0

Estoy utilizando Data tables con MatPaginator en angular material y quisiera realizar una acción cuando el usuario llegue al final de las paginas de la dataTable, este es mi código de HTML

    </table>
</div>
<mat-paginator [pageSizeOptions]="[10,10, 15, 25, 100]"></mat-paginator>

Y este es mi TypeScript

  constructor(private visorOracle: VisorService) { }  
    paginaActual:Number = 10; 
    fechaActual:number; 
  displayedColumns = [   
    'UBICACION',
    'FECHHA_HORA',
    'NOMBRE_PACIENTE',
    'UBINOM', 
  ];
    dataSource: any; 
        @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
        ngOnInit() {

      this.envio(this.seleccionada);
     setInterval(() => {
       this.fechaActual = Date.now(); 
  }, 10); 

  }  
  enviosamu(){ 

    this.envio(this.seleccionada);
        setInterval(() => {
      this.envio(this.seleccionada)
      ;
      console.log('Recarga',this.recarga);
      this.recarga = this.recarga + 1
  }, 45000); 
 ;

  }

  envio(Samu){ 
     this.visorOracle.getPacientes(Samu).subscribe(
      res => {
        console.log('llegaron ',res);
        this.dataSource = new MatTableDataSource();
        this.dataSource.data = res; 
        this.dataSource.paginator = this.paginator;


        // alertify.success('DATOS CARGADOS ');    
          setInterval(() => {
            if (this.paginaActual < this.paginator.length){
              this.paginator.nextPage();
              this.paginaActual =+ this.paginaActual +10  ;
              console.log('nex pague',this.paginator.length, this.paginaActual);
            }else{
              // this.paginaActual = (this.paginaActual - 10 ) ;
              this.paginator.previousPage();
              console.log('previus pague', this.paginaActual);
            }  

Está haciendo una iteración cada 10 segundos y me cambia la página el tema es que no se si llega a la página final para regresar a la pagina index

1 respuesta 1

0

Por defecto, mat-paginator muestra 50 items por página. Con este dato y sabiendo el total de datos puedes calcular si se ha llegado a la última página.

Para saber en que página estas mat-paginator emite un output con un evento cada vez que se cambia de página puedes escuchar ese evento. Este evento tienes las siguientes propiedades:

{previousPageIndex: 0, pageIndex: 0, pageSize: 10, length: 100 }

Se escucha el evento page

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

En el ts

// se calcula el índice final
// el indice inicial es 0  por eso se resta -1
// lo he puesto aquí pero deberías calcularlo cuando haya seteado el valor de dataSource
lastPageIndex = (this.dataSource.data.length/ this.pageSize) - 1;
pageChange(e: PageEvent) {
  console.log(e);
  if (e.pageIndex === this.lastPageIndex) {
    alert('last');
  }
}

MatPaginator docs

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.