Pagination component

Such a feature is not officially supported, because pagination is connected to the main table directive and it would be difficult to handle many pagination components at the same time.

However, you could try to use some inputs, outputs and methods to sync the additional pagination with the main table pagination. But please note that this is only a workaround and we can't guarantee that it will work flawlessly.

Here is an example (in this case the footerPagination is the main pagination connected to the table):

HTML:

<mdb-table-pagination #headerPagination [total]="pagination.total" (paginationChange)="onHeaderPaginationChange($event)"></mdb-table-pagination>

<mdb-table-pagination #footerPagination (paginationChange)="onFooterPaginationChange($event)"></mdb-table-pagination>

TS:

  @ViewChild('footerPagination', { static: true }) footerPagination: MdbTablePaginationComponent;
  @ViewChild('headerPagination', { static: true }) headerPagination: MdbTablePaginationComponent;

  ngOnInit(): void {
    this.headerPagination.page = this.footerPagination.page;
  }

  onHeaderPaginationChange(event: any) {
    this.footerPagination.entries = event.entries;
    this.footerPagination.page = event.page;

    // trigger event to inform connected table about the change
    this.footerPagination.paginationChange.emit(event);
  }

  onFooterPaginationChange(event: any) {
    this.headerPagination.entries = event.entries;
    this.headerPagination.page = event.page;
  }