TransWikia.com

como paginar una list en angular

Stack Overflow en español Asked by user184448 on January 4, 2022

Quiero utilizar este componente

<mat-paginator [length]="100"
              [pageSize]="10"
              [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

Esto es el codigo que tengo en la vista de html

<mat-list role="list">
  <mat-list-item role="listitem">numero 1</mat-list-item>
  <mat-list-item role="listitem">numero 2</mat-list-item>
  <mat-list-item role="listitem">numero 3</mat-list-item>
</mat-list>

y esto en es lo que tengo en el archivo ts

import {Component} from '@angular/core';

/**
 * @title Basic list
 */
@Component({
  selector: 'list-overview-example',
  templateUrl: 'list-overview-example.html',
})
export class ListOverviewExample {}

introducir la descripción de la imagen aquí

One Answer

Solo necesitas usar el output (page) del componente para obtener los datos de paginacion.

<mat-paginator 
    [length]="listaCompleta.length" 
    [pageSize]="cantidadPorPagina" 
    (page)='paginar($event)'
    [pageSizeOptions]="opcionesDeCantidades">

</mat-paginator>

Y despues trabajas estos datos en tu logica:

paginar(paginacion: any) {
    let actual = paginacion.pageIndex * paginacion.pageSize
    this.listaParaMostrar = this.listaCompleta.slice(
      actual,
      actual + paginacion.pageSize
    );
  }

Te dejo un ejemplo funcional aqui


Edición

Para mantener los botones de ultima y primera pagina solo agrega showFirstLastButtons en el paginador.

El ejemplo esta actualizado.

Answered by Legna on January 4, 2022

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP