Topic: datatable pagination bug

ammi pro asked 4 months ago


Expected: if table.pagination.total = table.pagination.entries and showAllEntries=true, dropdown on pagination component should show "All". Actual: It shows blank.

<mdb-table-pagination 
          #paginationSearch 
          (paginationChange)="onPaginationChange($event)" 
          [entries]="tableEntries"
          [showAllEntries]="true"
          >
      </mdb-table-pagination>

Rafał Seifert staff answered 4 months ago


It seems we have a problem when entries is equal to total with showAllEntries. Thank you for reporting this case. Try updating entriesOptions input accordingly:

<mdb-table-pagination
  #pagination
  [entries]="tableEntries"
  showAllEntries
  [entriesOptions]="[10, tableEntries, 25, 50, 200]"
></mdb-table-pagination> 

You might have to change the place of tableEntries value in new array to keep it in order. We will add this problem to further investigation. Let us know if that solves your problem.


ammi pro commented 4 months ago

That is not a solution. It just adds another breakpoint to entriesOptions. For example I have 249 rows. If I make [entriesOptions]="[10, 25, 50, 200, 249]". It will display all records, but dropdown will show 249 instead of "All". If you expand dropdown you will see options 10, 25, 50, 200, 249, 'All'. I need to be able to select "All". Can you add option like -1 which will represent "All" or something similar?


Rafał Seifert staff commented 4 months ago

So you would like to achieve such effect that if tableEntries happen to be exactly the value of total and showAllEntries is set to true then on init the "All" option will be selected under the hood by our component and it will show "All" from the beggining. Is that correct?


ammi pro commented 4 months ago

If showAllEntries is set to true, I would like to have an option to select 'All' by default.


Rafał Seifert staff commented 4 months ago

It's hard to make it work without actual update on our source code. I've prepared a workaround that might work, please have a look:

@ViewChild('pagination', { read: ElementRef }) pagination: ElementRef;

      ngAfterViewInit(): void { if (this.tableEntries === this.dataSource.length && this.showAllEntries === true) { const selectComponent: HTMLInputElement = this.pagination.nativeElement.querySelector('mdb-select input'); selectComponent.value = 'All'; } }

In template you should have showAllEntries as component's local property

      <mdb-table-pagination
        #pagination 
        (paginationChange)="onPaginationChange($event)" 
        [showAllEntries]="showAllEntries"
        [entries]="tableEntries"
      ></mdb-table-pagination>

Did you manage to implement such approach to manually change the value of the pagination's select?


ammi pro commented 4 months ago

I will try that, but I would prefer to wait until you update your source code. Thank you very much for your help.


Rafał Seifert staff commented 4 months ago

We have added this problem to our to-do list and we will work on this. We will inform you when this issue is solved.



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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 5.2.0
  • Device: laptop
  • Browser: chrome
  • OS: w10
  • Provided sample code: No
  • Provided link: No