ejemplo de código angular bootstrap de paginación de tabla

Luego de de esta larga recopilación de información hemos podido resolver esta preocupación que suelen tener muchos usuarios. Te dejamos la respuesta y nuestro objetivo es serte de mucha apoyo.

Ejemplo 1: Cómo implementar Bootstrap 4 para la paginación ngb de Angular 2

exportclassHomeComponentimplementsOnInit


currentPage =1;
itemsPerPage =5;
pageSize: number;constructor()publiconPageChange(pageNum: number):voidthis.pageSize=this.itemsPerPage*(pageNum -1);publicchangePagesize(num: number):voidthis.itemsPerPage=this.pageSize+ num;

Ejemplo 2: Cómo implementar Bootstrap 4 para la paginación ngb de Angular 2

<div class="container-fluid"><div class="col-6 input-group"><div class="col-5 input-group-addon"><ngb-pagination [collectionSize]="users.length" #numPages [pageSize]="itemsPerPage"[(page)]="currentPage"(pageChange)="onPageChange(currentPage)"></ngb-pagination></div><div class="col-1 input-group-addon"><input class="input-sm text-center" type="number"[min]="10"[max]="users.length" step="1"[(ngModel)]="itemsPerPage"(onClick)="changePagesize(pageSize)"></div></div><ul *ngIf="users"><li *ngFor="let user of users | slice: pageSize | slice: 0:itemsPerPage"><img [src]="user.avatar" alt=" user.avatar "><p> user.id. user.first_name user.last_name</p></li></ul><pre><span class="float-md-left">Page: currentPage /numPages.pageCount</span><span class="float-md-right">Found items: itemsPerPage / users.length</span></pre></div>

Si sostienes alguna perplejidad o capacidad de aclarar nuestro post te recordamos dejar una glosa y con mucho gusto lo analizaremos.

---

---

Utiliza Nuestro Buscador