AnswerBun.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!

Related Questions

guardar gráficas en un for, R

1  Asked on November 20, 2021 by astronauta_estadstico

   

como elegir una variable dinamicamente en JS?

2  Asked on November 20, 2021 by pwnaz

   

Problema Para enviar Email desde SQL SERVER

1  Asked on November 18, 2021 by soldier

     

Problema con upload de archivos en PHP

1  Asked on November 18, 2021

   

Error en react navigation

1  Asked on November 18, 2021

 

No toma mi argumento de año de una forma de herencia simple

1  Asked on November 18, 2021 by carlos-posdas

   

¿Por qué un apuntador es capaz de imprimir un string?

1  Asked on November 18, 2021 by brandon-jesus-juarez-munguia

   

como se relaciona .resolve() y .reject() con .then() y .catch()

1  Asked on November 18, 2021 by emmanuel-maximino-lopez-licea

     

Cargar campos select con ajax

0  Asked on November 17, 2021 by rodrigo-jaque

     

MercadoPago Connect: Problemas Obtención credenciales usuario. SSL

1  Asked on November 17, 2021 by federico-rossi

     

Modificar un archivo csv en python

1  Asked on November 17, 2021 by user94589

   

Ask a Question

Get help from others!

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