Topic: Table pagination doen´t show all arrows.
Sorry for my bad english. I have old version mdbootstrap, and angular 7.2.0 and 4.7 md mdbootstrap.I make i table with paggination, but only appear two icons, when it shoul have 4 icons, two move one and one position, and two to finish table and beging table.Actual behavior*Only appear two, the most curious it´s that icons are the final and beginin but works step and step one position?*Resources (screenshots, code snippets etc.) @ViewChild(MdbTablePaginationComponent) mdbTablePagination: MdbTablePaginationComponent; @ViewChild(MdbTableDirective) mdbTable: MdbTableDirective; @ViewChild('userModal') userModal:any;
public noResults: boolean = false; public elements: any = []; public previous: any = [];
this.mdbTable.setDataSource(this.items); this.items = this.mdbTable.getDataSource(); this.previous = this.mdbTable.getDataSource();
this.mdbTablePagination.setMaxVisibleItemsNumberTo(10); this.mdbTablePagination.calculateFirstItemIndex(); this.mdbTablePagination.calculateLastItemIndex(); this.cdRef.detectChanges();
HTML 
Only show Two icons.
<!--Table head-->
<thead>
<tr >
<th class="text-center" *ngFor="let head of headElements; let i = index" aria-controls="tableSortExample" scope="col" [mdbTableSort]="items" [sortBy]="headElements[i].value" style="cursor: pointer">{{headElements[i].label }}
<mdb-icon fas icon="sort"></mdb-icon>
</th>
<th class="text-center">
Options
</th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr *ngFor="let item of items;let i = index" class="vertical-middle">
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.data1}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
<div class="button-options">
<button type="button" mdbBtn class="boton-info" size="sm" (click)="info(item)" mdbWavesEffect>
<mdb-icon fas icon="info"></mdb-icon>
</button>
<button type="button" mdbBtn class="boton-edit" size="sm" (click)="edit(item.id)" mdbWavesEffect>
<mdb-icon fas icon="pencil-alt"></mdb-icon>
</button>
<button type="button" mdbBtn class="boton-delete" (click)="delete(item.id,basicModal)" size="sm" mdbWavesEffect>
<mdb-icon far icon="trash-alt"></mdb-icon>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot class="grey lighten-5 w-100">
<tr>
<td colspan="7">
<mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="items"></mdb-table-pagination>
</td>
</tr>
</tfoot>
<!--Table body-->
</table>
this all html content but replace info for data1 because it´s sensible information I hope that´s all you need ¿?
Arkadiusz Idzikowski staff commented 3 years ago
@Quiles Estruch We tried to reproduce the problem on our end but without success. Please check if there are any errors in the browser console when you try to render the component.
Can you also confirm which version of MDB Angular do you use? As I mentioned in my previous comment, you added v7.5.1 to the specification of this issue, but some of the elements visible on the provided screenshots were added in v8.
Quiles Estruch commented 3 years ago
Thanks for your answer, but i have a lot tables with this problem, in one project, the project now it´s huge, it´s an inconvenience push or filter (to/by/for) search specific items. It´s possible if you can pass the example, althougth static data, it´s possible there is a problem, that isn´t easy to see. Please and thanks for your helpful.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB4 7.5.1
- Device: any
- Browser: any
- OS: any
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 3 years ago
@Quiles Estruch Could you please edit your post and provide a full HTML/TS code so we can reproduce this problem on our end? Also please check and confirm the MDB Angular version that you use. You mentioned v7.5.1 in the specification of the issue, but the first/last page buttons visible on the screenshot were added in v8.