Rate this docs

Table pagination

Angular Bootstrap table pagination

Angular Bootstrap Table Pagination is a component with simple navigation which lets you split a huge amount of content within the tables into smaller parts.

By default, pagination is initialized with Previous, page numbers and Next buttons.


Basic Example MDB Pro component Live Example


              <div class="card card-cascade narrower mt-5">
    
                <!--Card image-->
                <div class="view view-cascade gradient-card-header purple-gradient narrower py-4 mx-4 mb-3 d-flex justify-content-center align-items-center">
              
                  <h4 class="white-text font-weight-bold text-uppercase mb-0">Table with pagination</h4>
              
                </div>
                <!--/Card image-->
              
                <div class="px-4">
              
                  <!--Table-->
                  <table class="table table-hover table-responsive-md mb-0">
              
                    <!--Table head-->
                    <thead>
                      <tr>
                        <th scope="row">#</th>
                        <th class="th-lg">First Name</th>
                        <th class="th-lg">Last Name</th>
                        <th class="th-lg">Username</th>
                      </tr>
                    </thead>
                    <!--Table head-->
              
                    <!--Table body-->
                    <tbody>
                      <tr *ngFor="let data of tableData; let i = index">
                        <th px-3 *ngIf="data.id >= firstVisibleIndex && data.id <= lastVisibleIndex" scope="row">{{data.id}}</th>
                        <td *ngIf="data.id >= firstVisibleIndex && data.id <= lastVisibleIndex">{{data.firstName}}</td>
                        <td *ngIf="data.id >= firstVisibleIndex && data.id <= lastVisibleIndex">{{data.lastName}}</td>
                        <td *ngIf="data.id >= firstVisibleIndex && data.id <= lastVisibleIndex">{{data.username}}</td>
                      </tr>
                    </tbody>
                    <!--Table body-->
                  </table>
              
                </div>
              
                <hr class="my-0">
              
                <!--Bottom Table UI-->
                <div class="d-flex justify-content-center">
              
                  <!--Pagination -->
                  <nav class="my-4 pt-2">
                    <ul class="pagination pagination-circle pg-purple mb-0">
              
                      <!--First-->
                      <li class="page-item clearfix d-none d-md-block" (click)="firstPage()" [ngClass]="{disabled: activePage == 1}">
                        <a class="page-link">First</a>
                      </li>
              
                      <!--Arrow left-->
                      <li class="page-item" (click)="previousPage($event)" [ngClass]="{disabled: activePage == 1}">
                        <a class="page-link" aria-label="Previous">
                          <span aria-hidden="true">&laquo;</span>
                          <span class="sr-only">Previous</span>
                        </a>
                      </li>
              
                      <!--Numbers-->
                      <li #pages *ngFor="let page of paginators | slice:firstVisiblePaginator:lastVisiblePaginator; let i = index" class="page-item" [ngClass]="{active: i + firstVisiblePaginator + 1 == activePage}">
                          <a class="page-link waves-light" (click)="changePage($event)" mdbWavesEffect>{{page}}</a>
                      </li>
              
              
              
                      <!--Arrow right-->
                      <li class="page-item" (click)="nextPage($event)" [ngClass]="{disabled: activePage == numberOfPaginators}">
                        <a class="page-link" aria-label="Next">
                          <span aria-hidden="true">&raquo;</span>
                          <span class="sr-only">Next</span>
                        </a>
                      </li>
              
                      <!--First-->
                      <li class="page-item clearfix d-none d-md-block" (click)="lastPage()" [ngClass]="{disabled: activePage == numberOfPaginators}">
                        <a class="page-link">Last</a>
                      </li>
              
                    </ul>
                  </nav>
                  <!--/Pagination -->
              
                </div>
                <!--Bottom Table UI-->
              
              </div>
            

    import { Component, OnInit, ViewChildren, QueryList, ElementRef } from '@angular/core';
    
    @Component({
      selector: 'table-pagination',
      templateUrl: './table-pagination.component.html',
      styleUrls: ['./table-pagination.component.scss'],
    })
    export class TablePaginationComponent implements OnInit {
      @ViewChildren('pages') pages: QueryList<any>;
      itemsPerPage = 3;
      numberOfVisiblePaginators = 10;
      numberOfPaginators: number;
      paginators: Array<any> = [];
      activePage = 1;
      firstVisibleIndex = 1;
      lastVisibleIndex: number = this.itemsPerPage;
      firstVisiblePaginator = 0;
      lastVisiblePaginator = this.numberOfVisiblePaginators;
    
      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() {
        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);
        }
      }
    }
                

Advanced table options

For advanced options of the tables have a look at specific documentation pages listed below.

Table sort

This functionality lets you sort the data of the tables according to any specific columns.

Table editable

Table editable allows you to edit existing data within the table and add new data to the table.

Table styles

Table styles shows you how you can customize your tables.

Angular Pagination Table - API

In this section you will find advanced information about the Table component. You will find out which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Modules used

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.

                    
              // MDB Angular Pro
              import { WavesModule } from 'ng-uikit-pro-standard';
                    
    

Properties

The table shows the available properties in component.

Name Type Default Description Example
itemsPerPage number 3 If changed, defines the max elements visible per page. itemsPerPage = 2;
numberOfVisiblePaginators number 10 If changed, defines the max paginators visible at one time. numberOfVisiblePaginators: number = 2