pagination doenst work

Topic: pagination doenst work

Diego001 pro asked 4 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

Add comment

Diego001 pro answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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 4 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).

Add comment