Topic: Bug on MdbTablePaginationComponent

Olivier Baudouin OURA priority asked 4 days ago


Expected behavior

MdbTablePaginationComponent should display total as total count.

Actual behavior

MdbTablePaginationComponent display dataSource length as total count.

Resources (screenshots, code snippets etc.)

HTML:

      <mdb-table-pagination
        #pagination
        [rowsPerPageText]="rowsPerPageText"
        [entries]="entries"
        [entriesOptions]="entriesOptions"
        [total]="totalCount"
        [page]="currentPage"
        (paginationChange)="onPageChange($event)"
      >
      </mdb-table-pagination>

JS:

loadData(page: number, size: number, search?: string): void {
this.loading = true;
this.apiService.getPaginatedData('/third-parties/search', page + 1, size, search).subscribe(
  {
    next: (response) => {
      this.dataSource = response.items;
      this.totalCount = response.totalCount;
      this.currentPage = response.page - 1;
    },
    error: (error) => this.loading = false,
    complete: () => this.loading = false
  }
);

}

UI (What we see when we set 5 as entries. Total elements = 6):

enter image description here

UI (What we when we set 10 as entries. Total elements = 6):

enter image description here


Arkadiusz Idzikowski staff answered 17 hours ago


Did you use [pagination] input of the mdbTable directive to add your pagination component to the table directive like this: [pagination]="yourPaginationComponent"?

In this case, the pagination component will be coupled with table directive. We do that for the client side pagination to automatically handle all the changes in the pagination.

If you want to use server side pagination you should remove this input and handle the pagination component state manually.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 7.1.0
  • Device: Custom
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: Yes
  • Provided link: No