Datatable pagination doesn't work without searching


Topic: Datatable pagination doesn't work without searching

ISDev pro asked 3 years ago

Hi, I have a problem with the datatable. When I charge the page, the pagination just print 1 pages but I have 3 pages. If I write on the search bar and remove it, the pagination work. I have the same problem on the demo project of MBD Thank's

ISDev pro answered 3 years ago

Hi,

I changed this in the setTimeout function and it seems to work finely:

if ((this.tableData.length / this.maxVisibleItems) % this.paginators.length !== 0) {
this.paginators.push(this.paginators.length + 1);
}

Kapsch pro answered 3 years ago

Hi,

in the meanwhile, can you please provide a working example how to deal with pagination in case the datasource comes from a service asynchronously?

 

br\alex


Damian Gemza staff answered 3 years ago

Dear 4ntibala, For now, I can't provide you ready-to-use answer because I have to investigate this problem. We'll inform you when this problem will be fixed. Best Regards, Damian

Kapsch pro commented 3 years ago

Hi,

have same behavior like 4ntibala. Looks like MdbTablePaginationComponent can not handle the case when tableService.setDataSource() is used in async workflow. br\alex


4ntibala pro answered 3 years ago

Hi, i am using the new datatable from the link but i am having the same issue as described by Beaune. I changed the way the data gets inserted into the elements-array (through an httpservice), but all data gets displayed when i set mdbPagination.setMaxVisibleItemsNumberTo(25); When pressing next/previous all the datatable content disappears and there is now way to restore it besides reloading the page. This is my loading routine - but surely not related to the pagination issue?! Can you please help me out?
onList() {
  this.dbService.getCases()
    .subscribe(cases => {
      for (let i = 0; i <= cases.length - 1; i++) {
        console.log(cases[i]);
        this.currentCases.push(cases[i]);
      }
    });

  this.tableService.setDataSource(this.currentCases);

  this.currentCases = this.tableService.getDataSource();
  this.previous = this.tableService.getDataSource();
}



Damian Gemza staff answered 3 years ago

Dear BEAUNE, The data table which you're describing is old, and it was replaced with the new one. Please check our new data tables here. Best Regards, Damian
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
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: Terra
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No