Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: datatable pagination bug

ammi pro asked 10 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 free answered 10 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 10 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 free commented 10 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 10 months ago

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


Rafał Seifert free commented 10 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 10 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 free commented 10 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