Angular Bootstrap table pagination

Angular Table pagination - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Live example 
        
            
          <div class="container">
            <table mdbTable #tableEl="mdbTable" class="z-depth-1">
              <thead>
              <tr>
                <th *ngFor="let head of headElements; let i = index" scope="col">{{ head }}
                </th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let el of elements; let i = index">
                <th *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
                    scope="row">{{ el.id }}</th>
                <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{ el.first }}</td>
                <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{ el.last }}</td>
                <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{ el.handle }}</td>
              </tr>
              </tbody>
              <tfoot class="grey lighten-5 w-100">
              <tr>
                <td colspan="4">
                  <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="elements"></mdb-table-pagination>
                </td>
              </tr>
              </tfoot>
            </table>
          </div>
        
        
    
        
            
          import { MdbTablePaginationComponent, MdbTableDirective } from 'PATH-TO-MDB-ANGULAR-HERE';
          import { Component, OnInit, ViewChild, HostListener, AfterViewInit, ChangeDetectorRef } from '@angular/core';

          @Component({
            selector: 'table-pagination',
            templateUrl: './table-pagination.component.html',
            styleUrls: ['./table-pagination.component.scss']
          })
          export class TablePaginationComponent implements OnInit, AfterViewInit {
            @ViewChild(MdbTablePaginationComponent, { static: true }) mdbTablePagination: MdbTablePaginationComponent;
            @ViewChild(MdbTableDirective, { static: true }) mdbTable: MdbTableDirective
            elements: any = [];
            previous: any = [];
            headElements = ['ID', 'First', 'Last', 'Handle'];

            constructor(private cdRef: ChangeDetectorRef) { }

            ngOnInit() {
              for (let i = 1; i <= 15; i++) {
                this.elements.push({id: i.toString(), first: 'User ' + i, last: 'Name ' + i, handle: 'Handle ' + i});
              }

              this.mdbTable.setDataSource(this.elements);
              this.elements = this.mdbTable.getDataSource();
              this.previous = this.mdbTable.getDataSource();
            }

            ngAfterViewInit() {
              this.mdbTablePagination.setMaxVisibleItemsNumberTo(5);

              this.mdbTablePagination.calculateFirstItemIndex();
              this.mdbTablePagination.calculateLastItemIndex();
              this.cdRef.detectChanges();
            }
          }

Advanced table options

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

Datatables

MDBootstrap integration with the most popular plugin enhancing the possibilities of standard tables.

Table responsive

Responsive table allows you to use your tables on mobile devices.
Table search

The MDBootstrap search box enables super fast searching through all the table data.

Table sort

This functionality lets you sort the table data 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. 

        
            
            import { WavesModule, TableModule } from 'ng-uikit-pro-standard';
          
        
    
        
            
            import { WavesModule, TableModule } from 'angular-bootstrap-md';
Import Example Modules List

Components

MdbTablePaginationComponent

Selector: mdb-table-pagination

Type: MdbTablePaginationComponent

Inputs

Name Type Default Description Example
searchPagination boolean false Defines whether you use pagination together with the search. This is required if you use pagination when filtering results. searchPagination="true"
searchDataSource any null Assigns the data source when filtering results. On this basis, the number of elements in the pagination is calculated. Required for pagination with search. [searchDataSource]="elements"
paginationAlign string ' ' Defines whether the pagination should be fixed to the left or right edge of the table. By default, the pagination is centered. Available values are: start / end. paginationAlign="start"
hideDescription boolean false Determines whether the number of elements in a pagination should be visible or not. hideDescription="true"
tableEl MdbTableDirective - Input which is used to pass the instance of exported mdb-table.directive class to mdb-table-pagination component. This field is necessary. [tableEl]="exportedTableIndex"
ofKeyword string 'of' Input which is used to overwrite default "of" text from pagination items. ofKeyword="from"
dashKeyword string '-' Input which is used to overwrite default "-" text from pagination items. dashKeyword="/"

Outputs

Name Type Description Example
nextPageClick EventEmitter<any> Emits the nextPageClick event, which contains first and last fields, which are responsible for the index of the first and last item currently visible on the table screen. It is required to use this event in order for the pagination to work properly. (nextPageClick)="onNextPageClick($event)"
previousPageClick EventEmitter<any> Emits the previousPageClick event, which contains first and last fields, which are responsible for the index of the first and last item currently visible on the table screen. It is required to use this event in order for the pagination to work properly. (previousPageClick)="onPreviousPageClick($event)"

Methods

Name Description Example
setMaxVisibleItemsNumberTo It is used to set the maximum number of items displayed at once in the array. The default is 10. setMaxVisibleItemsNumberTo(20)
calculateFirstItemIndex Calculates the index of the first visible element of the table. From default it's 1. The use of this method is required for the proper functioning of pagination. It is used in the cycle ngAfterViewInit calculateFirstItemIndex()
calculateLastItemIndex Calculates the index of the last visible element of the table. From default it's 10. The use of this method is required for the proper functioning of pagination. It is used in the cycle ngAfterViewInit calculateLastItemIndex()