MDB Table Pagination

Dear @Guidtm

Below an example with programmatically control ">>" and "<<"

<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>
<button mdbBtn (click)="onFirst()">First</button>
<button mdbBtn (click)="onLast()">Last</button>

TS

import {
  MdbTableDirective,
  MdbTablePaginationComponent,
} from 'ng-uikit-pro-standard

  @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();
  }
  onLast() {
    this.mdbTablePagination.lastPage();
  }
  onFirst() {
    this.mdbTablePagination.firstPage();
  }

Hope it helps!

Best Regards, Bartosz.

Hello thanks for helping me. I copy your code(image). I can control the ">" calling (nextPageClick)="nextPageName()" but i can't control the ">>". Is there any way I can control this button? or hide him.

Dear @Guidtm

Unfortunately, there is no table pagination event emitters firstPagePage or lastPageClick. I assure you that they will be added in the near future.

Regarding your question - you can control this buttons (hide them), like below:

<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>
  <button mdbBtn (click)="onFirst()">First</button>
  <button mdbBtn (click)="onLast()">Last</button>

TS

  @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, private renderer: Renderer2) {}
​
  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();
​
    this.removeFunc();
  }
  onLast() {
    this.mdbTablePagination.lastPage();
  }
  onFirst() {
    this.mdbTablePagination.firstPage();
  }
​
  removeFunc() {
    const pagination = document.querySelector('mdb-table-pagination');
​
    const first = pagination && pagination.querySelectorAll('.page-item')[0];
    const second = pagination && pagination.querySelectorAll('.page-item')[3];
    if (first && second) {
      this.renderer.removeChild(first.parentNode, first);
      this.renderer.removeChild(second.parentNode, second);
    }
  }

Hope it helps!

Best Regards, Bartosz.