Topic: Bug on MdbTablePaginationComponent

Olivier Baudouin OURA priority asked 1 week 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



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.


Olivier Baudouin OURA priority commented 2 days ago

Thanks Arkadiusz ! I was doing server side pagination while using this directive : [pagination]="yourPaginationComponent". That's why it wasn't working. I removed it and it works now.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

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