Topic: MDB Table Pagination
Guidtm free asked 5 years ago
Hello. How can I control programmatically the button ">>"(go to the last page) i know we can control the nextPageClick and previousPageClick using (previousPageClick)="previousPage()" (nextPageClick)="nextPage()" but i don't know how control this buttons "<<" ">>"
where i can see all functions in doc?
Bartosz Termena staff answered 5 years ago
Dear @Guidtm
Unfortunately, there is no table pagination event emitters firstPagePage
or lastPageClick
. I assure you that they will be added in the near future.
Regarding your question - you can control this buttons (hide them), like below:
<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>
<button mdbBtn (click)="onFirst()">First</button>
<button mdbBtn (click)="onLast()">Last</button>
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, private renderer: Renderer2) {}
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.cdRef.detectChanges();
this.removeFunc();
}
onLast() {
this.mdbTablePagination.lastPage();
}
onFirst() {
this.mdbTablePagination.firstPage();
}
removeFunc() {
const pagination = document.querySelector('mdb-table-pagination');
const first = pagination && pagination.querySelectorAll('.page-item')[0];
const second = pagination && pagination.querySelectorAll('.page-item')[3];
if (first && second) {
this.renderer.removeChild(first.parentNode, first);
this.renderer.removeChild(second.parentNode, second);
}
}
Hope it helps!
Best Regards, Bartosz.
Guidtm free answered 5 years ago
Hello thanks for helping me. I copy your code(image). I can control the ">" calling (nextPageClick)="nextPageName()" but i can't control the ">>". Is there any way I can control this button? or hide him.
Bartosz Termena staff answered 5 years ago
Dear @Guidtm
Below an example with programmatically control ">>" and "<<"
<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>
<button mdbBtn (click)="onFirst()">First</button>
<button mdbBtn (click)="onLast()">Last</button>
TS
import {
MdbTableDirective,
MdbTablePaginationComponent,
} from 'ng-uikit-pro-standard
@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.cdRef.detectChanges();
}
onLast() {
this.mdbTablePagination.lastPage();
}
onFirst() {
this.mdbTablePagination.firstPage();
}
Hope it helps!
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: Opera
- OS: Windows
- Provided sample code: No
- Provided link: No