Topic: pagination doenst work
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
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).
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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