Angular Bootstrap Pagination
Angular Bootstrap pagination is a component used to indicate existance of a series of related content across multiple pages and enables navigation across them.
We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML
elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.
In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination
component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".
<!--Pagination -->
<nav class="my-4">
<ul class="pagination pagination-circle pg-blue mb-0">
<!--First-->
<li class="page-item disabled"><a class="page-link" mdbWavesEffect>First</a></li>
<!--Arrow left-->
<li class="page-item disabled">
<a class="page-link" mdbWavesEffect aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect >2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect >3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect >4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect >5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
<!--First-->
<li class="page-item"><a class="page-link">Last</a></li>
</ul>
</nav>
<!--/Pagination -->
Basic examples
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
<nav>
<ul class="pagination">
<li class="page-item" >
<a class="page-link" mdbWavesEffect aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item" ><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item" ><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item" ><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item" ><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item" ><a class="page-link" mdbWavesEffect>5</a></li>
<li class="page-item" >
<a class="page-link" mdbWavesEffect aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
Disabled and active states
Links are customizable for different circumstances. Use
.disabled for unclickable links and
.active to indicate the current page.
<nav>
<ul class="pagination pg-blue">
<li class="page-item disabled">
<a class="page-link" href="#" mdbWavesEffect aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" mdbWavesEffect>1 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item" ><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item" ><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item" ><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item" ><a class="page-link" mdbWavesEffect>5</a></li>
<li class="page-item" >
<a class="page-link" mdbWavesEffect aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
You can optionally swap out active or disabled anchors for
<span>, or omit the anchor in the case of the prev/next arrows, to remove click functionality while
retaining intended styles.
<nav>
<ul class="pagination pg-blue">
<li class="page-item disabled">
<span class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</span>
</li>
<li class="page-item active">
<a class="page-link" mdbWavesEffect>1 <span class="sr-only">(current)</span></a>
</li>
</ul>
</nav>
Pagination color
<!--Pagination blue-->
<nav>
<ul class="pagination pg-blue">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination blue-->
<!--Pagination red-->
<nav>
<ul class="pagination pg-red">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination red-->
<!--Pagination teal-->
<nav>
<ul class="pagination pg-teal">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination teal-->
<!--Pagination dark-->
<nav>
<ul class="pagination pg-dark">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination dark-->
<!--Pagination blue grey-->
<nav>
<ul class="pagination pg-bluegrey">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination grey-->
<!--Pagination amber-->
<nav>
<ul class="pagination pg-amber">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination amber-->
<!--Pagination purple-->
<nav>
<ul class="pagination pg-purple">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination purple-->
<!--Pagination dark grey-->
<nav>
<ul class="pagination pg-darkgrey">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination dark grey-->
Sizing
Fancy larger or smaller pagination? Add
.pagination-lg or
.pagination-sm for additional sizes.
Large
<nav>
<ul class="pagination pagination-lg">
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm">
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" mdbWavesEffect>1</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
<li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
<li class="page-item">
<a class="page-link" mdbWavesEffect aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
Usage - basic example
Simple usage example with only 3 pages. This example shows how you can use our pagination in your projects.
MDB Angular Pagination - basic
ID
Title
{{post.id}}
{{post.title}}
import { Component, ViewChildren, QueryList, ElementRef, HostListener, Renderer2, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-pagination',
templateUrl: './pagination.component.html',
styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements AfterViewInit {
@ViewChildren('pages') pages: QueryList;
allPosts = [ ];
activePage = 1;
pageCount: Array = [1, 2, 3];
first = 1;
last = 4;
@HostListener('click', ['$event']) onclick(event: any) {
if (event.target.parentElement.innerText >= 1 || event.target.parentElement.innerText <= 3) {
(this.activePage as number) = +event.target.parentElement.innerText;
this.clearActive();
this.renderer.addClass(event.target.parentElement, 'active');
}
this.first = +this.activePage * 4 - 4 + 1;
this.last = +this.activePage * 4;
}
constructor(private renderer: Renderer2, private el: ElementRef) {
for (let i = 0; i <= 15; i++) {
this.allPosts.push({id: i, title: 'Post ' + i});
}
}
ngAfterViewInit() {
this.clearActive();
this.renderer.addClass(this.pages.first.nativeElement, 'active');
this.activePage = 1;
this.first = +this.activePage * 4 - 4 + 1;
this.last = +this.activePage * 4;
}
clearActive() {
this.pages.forEach(element => {
this.renderer.removeClass(element.nativeElement, 'active');
});
}
firstPage() {
this.clearActive();
const firstPage = this.pages.first.nativeElement;
(this.activePage as number) = +firstPage.innerText;
this.clearActive();
this.renderer.addClass(firstPage, 'active');
this.first = +this.activePage * 4 - 4 + 1;
this.last = +this.activePage * 4;
}
lastPage() {
this.clearActive();
const lastPage = this.pages.last.nativeElement;
(this.activePage as number) = +lastPage.innerText;
this.clearActive();
this.renderer.addClass(lastPage, 'active');
this.first = +this.activePage * 4 - 4 + 1;
this.last = +this.activePage * 4;
}
}
Usage - advanced example
Advanced example with previous / next page and first / last page buttons. You can change number of items per page and visible paginators in variables.
Table with pagination
Id
Title
{{data.id}}
{{data.title}}
import { Component, OnInit, ViewChildren, QueryList, ElementRef } from '@angular/core';
@Component({
selector: 'app-pagination-advanced',
templateUrl: './pagination-advanced.component.html',
styleUrls: ['./pagination-advanced.component.scss'],
})
export class PaginationAdvancedComponent implements OnInit {
@ViewChildren('pages') pages: QueryList;
itemsPerPage = 10;
numberOfVisiblePaginators = 10;
numberOfPaginators: number;
paginators: Array = [];
activePage = 1;
firstVisibleIndex = 1;
lastVisibleIndex: number = this.itemsPerPage;
firstVisiblePaginator = 0;
lastVisiblePaginator = this.numberOfVisiblePaginators;
tableData = [];
constructor(private el: ElementRef) {}
/* tableData = [
{ id: 1, firstName: 'Mark', lastName: 'Otto', username: '@mdo' },
{ id: 2, firstName: 'John', lastName: 'Doe', username: '@john' },
{ id: 3, firstName: 'Lessie', lastName: 'Moe', username: '@lessie' },
{ id: 4, firstName: 'Otton', lastName: 'Otto', username: '@otton' },
{ id: 5, firstName: 'Krauze', lastName: 'John', username: '@krauze' },
{ id: 6, firstName: 'Lex', lastName: 'Lucky', username: '@lex' },
{ id: 7, firstName: 'Allie', lastName: 'Bill', username: '@allie' },
{ id: 8, firstName: 'Anna', lastName: 'Frost', username: '@anna' },
{ id: 9, firstName: 'Bob', lastName: 'One', username: '@bob' },
{ id: 10, firstName: 'Carl', lastName: 'Johnson', username: '@cj' },
{ id: 11, firstName: 'Mia', lastName: 'Marx', username: '@mia' },
{ id: 12, firstName: 'Cia', lastName: 'Fbi', username: '@cia' },
{ id: 13, firstName: 'John', lastName: 'Doe', username: '@johny' },
{ id: 14, firstName: 'Mark', lastName: 'Otto', username: '@mdo' },
{ id: 15, firstName: 'Lessie', lastName: 'Moe', username: '@lessie'}
]; */
changePage(event: any) {
if (event.target.text >= 1 && event.target.text <= this.numberOfPaginators) {
this.activePage = +event.target.text;
this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
this.lastVisibleIndex = this.activePage * this.itemsPerPage;
}
}
nextPage(event: any) {
if (this.pages.last.nativeElement.classList.contains('active')) {
if ((this.numberOfPaginators - this.numberOfVisiblePaginators) >= this.lastVisiblePaginator) {
this.firstVisiblePaginator += this.numberOfVisiblePaginators;
this.lastVisiblePaginator += this.numberOfVisiblePaginators;
} else {
this.firstVisiblePaginator += this.numberOfVisiblePaginators;
this.lastVisiblePaginator = this.numberOfPaginators;
}
}
this.activePage += 1;
this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
this.lastVisibleIndex = this.activePage * this.itemsPerPage;
}
previousPage(event: any) {
if (this.pages.first.nativeElement.classList.contains('active')) {
if ((this.lastVisiblePaginator - this.firstVisiblePaginator) === this.numberOfVisiblePaginators) {
this.firstVisiblePaginator -= this.numberOfVisiblePaginators;
this.lastVisiblePaginator -= this.numberOfVisiblePaginators;
} else {
this.firstVisiblePaginator -= this.numberOfVisiblePaginators;
this.lastVisiblePaginator -= (this.numberOfPaginators % this.numberOfVisiblePaginators);
}
}
this.activePage -= 1;
this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
this.lastVisibleIndex = this.activePage * this.itemsPerPage;
}
firstPage() {
this.activePage = 1;
this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
this.lastVisibleIndex = this.activePage * this.itemsPerPage;
this.firstVisiblePaginator = 0;
this.lastVisiblePaginator = this.numberOfVisiblePaginators;
}
lastPage() {
this.activePage = this.numberOfPaginators;
this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
this.lastVisibleIndex = this.activePage * this.itemsPerPage;
if (this.numberOfPaginators % this.numberOfVisiblePaginators === 0) {
this.firstVisiblePaginator = this.numberOfPaginators - this.numberOfVisiblePaginators;
this.lastVisiblePaginator = this.numberOfPaginators;
} else {
this.lastVisiblePaginator = this.numberOfPaginators;
this.firstVisiblePaginator = this.lastVisiblePaginator - (this.numberOfPaginators % this.numberOfVisiblePaginators);
}
}
ngOnInit() {
for (let i = 1; i <= 100; i++) {
this.tableData.push({id: i, title: 'Post ' + i});
}
if (this.tableData.length % this.itemsPerPage === 0) {
this.numberOfPaginators = Math.floor(this.tableData.length / this.itemsPerPage);
} else {
this.numberOfPaginators = Math.floor(this.tableData.length / this.itemsPerPage + 1);
}
for (let i = 1; i <= this.numberOfPaginators; i++) {
this.paginators.push(i);
}
}
}
Usage - Advanced with data from API
Advanced example with data coming from foreign API. You can change number of items per page and visible paginators in variables.
Table with pagination
Id
Title
{{data.id}}
{{data.title}}
import { Component, OnInit, ViewChildren, QueryList, ElementRef } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';
@Component({
selector: 'app-pagination-api',
templateUrl: './pagination-api.component.html',
styleUrls: ['./pagination-api.component.scss'],
})
export class PaginationApiComponent implements OnInit {
@ViewChildren('pages') pages: QueryList;
itemsPerPage = 10;
numberOfVisiblePaginators = 10;
numberOfPaginators: number;
paginators: Array = [];
activePage = 1;
firstVisibleIndex = 1;
lastVisibleIndex: number = this.itemsPerPage;
firstVisiblePaginator = 0;
lastVisiblePaginator = this.numberOfVisiblePaginators;
url = 'https://jsonplaceholder.typicode.com/posts';
tableData: string[];
constructor(
private http: Http,
private el: ElementRef) {}
getData(): Observable {
return this.http.get(this.url);
}
changePage(event: any) {
if (event.target.text >= 1 && event.target.text <= this.numberOfPaginators) {
this.activePage = +event.target.text;
this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
this.lastVisibleIndex = this.activePage * this.itemsPerPage;
}
}
nextPage(event: any) {
if (this.pages.last.nativeElement.classList.contains('active')) {
if ((this.numberOfPaginators - this.numberOfVisiblePaginators) >= this.lastVisiblePaginator) {
this.firstVisiblePaginator += this.numberOfVisiblePaginators;
this.lastVisiblePaginator += this.numberOfVisiblePaginators;
} else {
this.firstVisiblePaginator += this.numberOfVisiblePaginators;
this.lastVisiblePaginator = this.numberOfPaginators;
}
}
this.activePage += 1;
this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
this.lastVisibleIndex = this.activePage * this.itemsPerPage;
}
previousPage(event: any) {
if (this.pages.first.nativeElement.classList.contains('active')) {
if ((this.lastVisiblePaginator - this.firstVisiblePaginator) === this.numberOfVisiblePaginators) {
this.firstVisiblePaginator -= this.numberOfVisiblePaginators;
this.lastVisiblePaginator -= this.numberOfVisiblePaginators;
} else {
this.firstVisiblePaginator -= this.numberOfVisiblePaginators;
this.lastVisiblePaginator -= (this.numberOfPaginators % this.numberOfVisiblePaginators);
}
}
this.activePage -= 1;
this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
this.lastVisibleIndex = this.activePage * this.itemsPerPage;
}
firstPage() {
this.activePage = 1;
this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
this.lastVisibleIndex = this.activePage * this.itemsPerPage;
this.firstVisiblePaginator = 0;
this.lastVisiblePaginator = this.numberOfVisiblePaginators;
}
lastPage() {
this.activePage = this.numberOfPaginators;
this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
this.lastVisibleIndex = this.activePage * this.itemsPerPage;
if (this.numberOfPaginators % this.numberOfVisiblePaginators === 0) {
this.firstVisiblePaginator = this.numberOfPaginators - this.numberOfVisiblePaginators;
this.lastVisiblePaginator = this.numberOfPaginators;
} else {
this.lastVisiblePaginator = this.numberOfPaginators;
this.firstVisiblePaginator = this.lastVisiblePaginator - (this.numberOfPaginators % this.numberOfVisiblePaginators);
}
}
addPaginators() {
if (this.tableData.length % this.itemsPerPage === 0) {
this.numberOfPaginators = Math.floor(this.tableData.length / this.itemsPerPage);
} else {
this.numberOfPaginators = Math.floor(this.tableData.length / this.itemsPerPage + 1);
}
for (let i = 1; i <= this.numberOfPaginators; i++) {
this.paginators.push(i);
}
}
ngOnInit() {
this.getData().subscribe(data => {
this.tableData = data.json();
this.addPaginators();
});
}
}
API Reference:
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Pagination:
// For MDB Angular Pro
import { WavesModule } from 'ng-uikit-pro-standard'// For MDB Angular Free
import { WavesModule } from 'angular-bootstrap-md'