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 Live Example


        
          
            
              {{head}}
              
            
          
          
            
              {{el.id}}
              {{el.first}}
              {{el.last}}
              {{el.handle}}

{{head}}
{{el.id}}	{{el.first}}	{{el.last}}	{{el.handle}}



        import { MdbTablePaginationComponent, MdbTableService } 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) mdbTablePagination: MdbTablePaginationComponent;

          elements: any = [];
          headElements = ['ID', 'First', 'Last', 'Handle'];

          firstItemIndex;
          lastItemIndex;

          constructor(private tableService: MdbTableService,
            private cdRef: ChangeDetectorRef) {
          }

          @HostListener('input') oninput() {
            this.mdbTablePagination.searchText = this.searchText;
          }

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

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

          ngAfterViewInit() {
            this.mdbTablePagination.setMaxVisibleItemsNumberTo(5);
            this.firstItemIndex = this.mdbTablePagination.firstItemIndex;
            this.lastItemIndex = this.mdbTablePagination.lastItemIndex;

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

          onNextPageClick(data: any) {
            this.firstItemIndex = data.first;
            this.lastItemIndex = data.last;
          }

          onPreviousPageClick(data: any) {
            this.firstItemIndex = data.first;
            this.lastItemIndex = data.last;
          }
        }

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

MDBootstrap search box enables super fast searching among all the data of the table.

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.