Topic: mdbTablePagination
Guidtm free asked 5 years ago
Hello i'm trying to change mdbTablePagination.allItemsLength manually but the value is not changing
this is my code.
this.gridLotes = data;
this.mdbTable.setDataSource(this.gridLotes.subLotes);
this.mdbTablePagination.allItemsLength = this.gridLotes.qtdRegistros;
this.gridLotes.subLotes = this.mdbTable.getDataSource();
this.previous = this.mdbTable.getDataSource();
this.cdRef.detectChanges();
Bartosz Termena staff answered 5 years ago
Dear @Guidtm
Here you go: TS
@ViewChild(MdbTablePaginationComponent, { static: true })
mdbTablePagination: MdbTablePaginationComponent;
@ViewChild(MdbTableDirective, { static: true }) mdbTable: MdbTableDirective;
elements: any = [];
previous: any = [];
headElements = ['ID', 'First', 'Last', 'Handle'];
constructor(private cdRef: ChangeDetectorRef) {}
ngOnInit() {
for (let i = 1; i <= 15; i++) {
this.elements.push({
id: i.toString(),
first: 'User ' + i,
last: 'Name ' + i,
handle: 'Handle ' + i,
});
}
this.mdbTable.setDataSource(this.elements);
this.elements = this.mdbTable.getDataSource();
this.previous = this.mdbTable.getDataSource();
}
ngAfterViewInit() {
this.mdbTablePagination.setMaxVisibleItemsNumberTo(5);
this.mdbTablePagination.calculateFirstItemIndex();
this.mdbTablePagination.calculateLastItemIndex();
this.mdbTablePagination.allItemsLength = this.mdbTablePagination.allItemsLength + 150;
this.cdRef.detectChanges();
console.log(this.mdbTablePagination.allItemsLength);
}
HTML
<div class="container">
<table mdbTable #tableEl="mdbTable" class="z-depth-1">
<thead>
<tr>
<th *ngFor="let head of headElements; let i = index" scope="col">{{ head }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let el of elements; let i = index">
<th
*ngIf="i + 1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
scope="row"
>
{{ el.id }}
</th>
<td
*ngIf="i + 1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
>
{{ el.first }}
</td>
<td
*ngIf="i + 1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
>
{{ el.last }}
</td>
<td
*ngIf="i + 1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
>
{{ el.handle }}
</td>
</tr>
</tbody>
<tfoot class="grey lighten-5 w-100">
<tr>
<td colspan="4">
<mdb-table-pagination
[tableEl]="tableEl"
[searchDataSource]="elements"
></mdb-table-pagination>
</td>
</tr>
</tfoot>
</table>
</div>
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.5.0
- Device: PC
- Browser: Google Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No