Topic: pagination doenst work

Diego001 pro asked 5 years ago


i followed the example from https://mdbootstrap.com/docs/angular/tables/datatables/#e-data-from-api

basically, the problem is lastItemIndex is always 0. I tested the behaviour with the next code

    <tbody>
        <tr mdbTableCol *ngFor="let data of list; let i = index">
          <td>index: {{i}} | firstItemIndex: {{mdbTablePagination.firstItemIndex}} | lastItemIndex: {{mdbTablePagination.lastItemIndex}} </td>
          <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex" scope="row">{{data.id}}</td> // this never shows
        </tr>
    </tbody>

and show this

index: 0 | firstItemIndex: 1 | lastItemIndex: 0
index: 1 | firstItemIndex: 1 | lastItemIndex: 0
index: 2 | firstItemIndex: 1 | lastItemIndex: 0

basically y cant see the information because the condition i < mdbTablePagination.lastItemIndex is always false because lastItemIndex is 0

aditionally this is the info from this.mdbTablePagination object:

activePageNumber: 1
allItemsLength: 7
firstItemIndex: 1
hideDescription: false
lastItemIndex: 0
lastVisibleItemIndex: 0
maxVisibleItems: 5

Diego001 pro answered 5 years ago


code:

ngOnInit() {
this.initForm();
this.subscription = this.route.params.subscribe(params => {
  this.viewType = params.type;
  this.getData();
});

}

ngAfterViewInit() {
this.mdbTablePagination.setMaxVisibleItemsNumberTo(this.maxVisibleItems);
this.mdbTablePagination.calculateFirstItemIndex();
this.mdbTablePagination.calculateLastItemIndex();
this.cdRef.detectChanges();

console.log(this.mdbTablePagination);

}

getData() {
this.dataService.getData(this.searchParams)
  .subscribe(
    (data: Data) => { // Success
      this.list = data;
      this.mdbTable.setDataSource(this.list);
    },
    (error) => {
      console.error(error);
    }
  );
this.list = this.mdbTable.getDataSource();
this.previous = this.mdbTable.getDataSource();

}


Damian Gemza staff commented 5 years ago

Dear @Diego001

Did you try to use the example from our documentation? Or you've just checked it?

I have copied the code from there, and it's working fine (pagination works, items are rendered fine, no errors in the console).



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: 7.5.4
  • Device: pc
  • Browser: chrome
  • OS: Linux
  • Provided sample code: No
  • Provided link: Yes