Topic: Table Pagination with Tabs
It's posible to use table pagination and tabs together?
i 've tested pagination and tabs, but pagination not work correctly in the second tab, return the following 0 - 16 de 16
First tab
Second tab(the total of registers in second tab is 16, max limit pagination = 5)
Dear @Moises Trigueros
You have to refer to the unique instances using @ViewChild
So, in the second table, change your #tableEl to ex. #tableEl2
you must do the same with #paginationUsers
Below is example of how to user @ViewChild in TS code
@ViewChild('mdbTablePagination', { static: true })
mdbTablePagination: MdbTablePaginationComponent;
@ViewChild('mdbTablePagination2', { static: true })
mdbTablePagination2: MdbTablePaginationComponent;
@ViewChild('tableEl', { static: true }) tableEl: MdbTableDirective;
@ViewChild('tableEl2', { static: true }) tableEl2: MdbTableDirective;
And here is my entire example of how to use multiple tables in tabs:
html:
<div class="container-fluid mt-4">
<div class="row justify-content-center">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<div class="row justify-content-center">
<div class="col-12 col-sm-12 col-md-6 col-lg-3 mb-5">
<a>
<div class="card card-cascade cascading-admin-card text-muted hoverable rounded-card">
<div class="admin-up">
<mdb-icon class="green-seven-one fas" fas="" icon="money-bill-alt"
><i class="fa-money-bill-alt primary-color fas"></i
></mdb-icon>
<div class="data mb-3">
<h3><strong>initialInvertion</strong></h3>
<h4 class="mt-2">Players: (totalMembers)</h4>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="col-12">
<!-- Nav Tabs -->
<mdb-tabset
#staticTabs
[buttonClass]="'md-tabs tabs-2 green-seven-one'"
[contentClass]="'card'"
>
<!--Panel 1-->
<mdb-tab heading="Administradores">
<div class="row">
<div class="col-12 mb-3">
<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
#mdbTablePagination
[tableEl]="tableEl"
[searchDataSource]="elements"
></mdb-table-pagination>
</td>
</tr>
</tfoot>
</table>
</div>
<ng-template #emptyRegisteredUsers>
<!-- No existen usuarios registrados -->
</ng-template>
</div>
</div>
</mdb-tab>
<!--Panel 2-->
<mdb-tab heading="Usuarios">
<div class="row">
<div class="col-12 mb-3">
<div class="container">
<table mdbTable #tableEl2="mdbTable" class="z-depth-1">
<thead>
<tr>
<th *ngFor="let head of headElements2; let i = index" scope="col">
{{ head }}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let el of elements2; let i = index">
<th
*ngIf="
i + 1 >= mdbTablePagination2.firstItemIndex &&
i < mdbTablePagination2.lastItemIndex
"
scope="row"
>
{{ el.id }}
</th>
<td
*ngIf="
i + 1 >= mdbTablePagination2.firstItemIndex &&
i < mdbTablePagination2.lastItemIndex
"
>
{{ el.first }}
</td>
<td
*ngIf="
i + 1 >= mdbTablePagination2.firstItemIndex &&
i < mdbTablePagination2.lastItemIndex
"
>
{{ el.last }}
</td>
<td
*ngIf="
i + 1 >= mdbTablePagination2.firstItemIndex &&
i < mdbTablePagination2.lastItemIndex
"
>
{{ el.handle }}
</td>
</tr>
</tbody>
<tfoot class="grey lighten-5 w-100">
<tr>
<td colspan="4">
<mdb-table-pagination
#mdbTablePagination2
[tableEl]="tableEl2"
[searchDataSource]="elements2"
></mdb-table-pagination>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</mdb-tab>
</mdb-tabset>
</div>
</div>
</div>
ts:
import {
MdbTablePaginationComponent,
MdbTableDirective,
} from 'yourpath';
@ViewChild('mdbTablePagination', { static: true })
mdbTablePagination: MdbTablePaginationComponent;
@ViewChild('mdbTablePagination2', { static: true })
mdbTablePagination2: MdbTablePaginationComponent;
@ViewChild('tableEl', { static: true }) tableEl: MdbTableDirective;
@ViewChild('tableEl2', { static: true }) tableEl2: MdbTableDirective;
elements: any = [];
elements2: any = [];
previous: any = [];
previous2: any = [];
headElements = ['ID', 'First', 'Last', 'Handle'];
headElements2 = ['ID2', 'First2', 'Last2', 'Handle2'];
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.elements2.push({
id: i.toString(),
first: 'User ' + i + 1,
last: 'Name ' + i + 1,
handle: 'Handle ' + i + 1,
});
}
this.tableEl.setDataSource(this.elements);
this.elements = this.tableEl.getDataSource();
this.previous = this.tableEl.getDataSource();
this.tableEl2.setDataSource(this.elements2);
this.elements2 = this.tableEl2.getDataSource();
this.previous2 = this.tableEl2.getDataSource();
}
ngAfterViewInit(): void {
this.mdbTablePagination.setMaxVisibleItemsNumberTo(5);
this.mdbTablePagination.calculateFirstItemIndex();
this.mdbTablePagination.calculateLastItemIndex();
this.mdbTablePagination2.setMaxVisibleItemsNumberTo(5);
this.mdbTablePagination2.calculateFirstItemIndex();
this.mdbTablePagination2.calculateLastItemIndex();
this.cdRef.detectChanges();
}
Hope it helps!
Best Regards, Bartosz.
Moises Trigueros free commented 4 years ago
Works :) , thank so much again , Bartosz - I owe you one
Best Regards, Moises.
<div class="container-fluid mt-4">
<div class="row justify-content-center">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<div class="row justify-content-center">
<div class="col-12 col-sm-12 col-md-6 col-lg-3 mb-5" *ngFor="let group of groupsAdmin | async">
<a (click)="viewGroupUsers(group._id)">
<div class="card card-cascade cascading-admin-card text-muted hoverable rounded-card">
<div class="admin-up">
<mdb-icon class="green-seven-one fas" fas="" icon="money-bill-alt"><i
class="fa-money-bill-alt primary-color fas"></i></mdb-icon>
<div class="data mb-3">
<h3><strong>$ {{group.initialInvertion}}</strong></h3>
<h4 class="mt-2">Players: {{group.totalMembers}}</h4>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="col-12">
<!-- Nav Tabs -->
<mdb-tabset #staticTabs [buttonClass]="'md-tabs tabs-2 green-seven-one'" [contentClass]="'card'">
<!--Panel 1-->
<mdb-tab heading="Administradores" (select)="selectTabAdmins($event)">
<div class="row">
<div class="col-12 mb-3">
<div *ngIf="existsRegisteredAdmins; else emptyRegisteredUsers"
class="container-fluid mt-3">
<div class="form-inline md-form form-sm mt-0">
<i class="fas fa-search" aria-hidden="true"></i>
<input [(ngModel)]="searchText" class="form-control form-control-sm ml-3 w-95"
type="text" placeholder="Buscar" aria-label="Buscar" id="search">
</div>
<div class="table-responsive">
<table mdbTable #tableEl="mdbTable" stickyHeader="true" hover="true"
small="true" bordered="true" striped="true">
<thead>
<tr>
<th *ngFor="let head of headElements; let i = index"
[mdbTableSort]="admins" [sortBy]="sortByElements[i]" scope="col">
{{head | titlecase}} <mdb-icon fas icon="sort"></mdb-icon>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let admin of admins; let i = index">
<th *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
class="align-middle" scope="row"> {{i + 1}}</th>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
class="align-middle">{{admin.userName}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
class="align-middle">{{admin.firstName}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
class="align-middle">{{admin.lastName}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
class="align-middle">{{admin.email}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
class="align-middle">
<div class="text-center align-middle">
<mdb-icon fas
[icon]="user.enabled ? 'user-check' : 'user-alt-slash'">
</mdb-icon> {{admin.enabled ? 'Habilitado' : 'Inhabilitado'}}
</div>
</td>
<td
*ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
<div class="text-center">
<button mdbBtn type="button" size="sm" color="success"
mdbWavesEffect mdbTooltip="Habilitar usuario"
(click)="enableUser(admin)">
<mdb-icon fas icon="user-check"></mdb-icon>
</button>
<button mdbBtn type="button" size="sm" color="danger"
mdbWavesEffect mdbTooltip="Inhabilitar usuario"
(click)="disableUser(admin)">
<mdb-icon fas icon="user-alt-slash"></mdb-icon>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot class="grey lighten-5 w-100">
<tr>
<td colspan="7">
<mdb-table-pagination [ofKeyword]="keyword" [tableEl]="tableEl"
paginationAlign="" [searchDataSource]="admins">
</mdb-table-pagination>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<ng-template #emptyRegisteredUsers>
<!-- No existen usuarios registrados -->
<app-empty-records></app-empty-records>
</ng-template>
</div>
</div>
</mdb-tab>
<!--Panel 2-->
<mdb-tab heading="Usuarios" (select)="selectTabUsers($event)">
<div class="row">
<div class="col-12 mb-3">
<div *ngIf="existsRegisteredUsers; else emptyRegisteredUsers"
class="container-fluid mt-3">
<div class="form-inline md-form form-sm mt-0">
<i class="fas fa-search" aria-hidden="true"></i>
<input [(ngModel)]="searchText" class="form-control form-control-sm ml-3 w-95"
type="text" placeholder="Buscar" aria-label="Buscar" id="search">
</div>
<div class="table-responsive">
<table mdbTable #tableEl="mdbTable" stickyHeader="true" hover="true"
small="true" bordered="true" striped="true">
<thead>
<tr>
<th *ngFor="let head of headElements; let i = index"
[mdbTableSort]="users" [sortBy]="sortByElements[i]" scope="col">
{{head | titlecase}} <mdb-icon fas icon="sort"></mdb-icon>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users; let i = index">
<th *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
class="align-middle" scope="row"> {{i + 1}}</th>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
class="align-middle">{{user.userName}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
class="align-middle">{{user.firstName}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
class="align-middle">{{user.lastName}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
class="align-middle">{{user.email}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
class="align-middle">
<div class="text-center align-middle">
<mdb-icon fas
[icon]="user.enabled ? 'user-check' : 'user-alt-slash'">
</mdb-icon> {{user.enabled ? 'Habilitado' : 'Inhabilitado'}}
</div>
</td>
<td
*ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
<div class="text-center">
<button mdbBtn type="button" size="sm" color="success"
mdbWavesEffect mdbTooltip="Habilitar usuario"
(click)="enableUser(user)">
<mdb-icon fas icon="user-check"></mdb-icon>
</button>
<button mdbBtn type="button" size="sm" color="danger"
mdbWavesEffect mdbTooltip="Inhabilitar usuario"
(click)="disableUser(user)">
<mdb-icon fas icon="user-alt-slash"></mdb-icon>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot class="grey lighten-5 w-100">
<tr>
<td colspan="7">
<mdb-table-pagination #paginationUsers [ofKeyword]="keyword" [tableEl]="tableEl"
paginationAlign="" [searchDataSource]="users">
</mdb-table-pagination>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<ng-template #emptyRegisteredUsers>
<!-- No existen usuarios registrados -->
<app-empty-records></app-empty-records>
</ng-template>
</div>
</div>
</mdb-tab>
</mdb-tabset>
</div>
</div>
</div>
TSCODE
@ViewChild(MdbTableDirective) mdbTable: MdbTableDirective; @ViewChild(MdbTablePaginationComponent) mdbTablePagination: MdbTablePaginationComponent; @ViewChild("paginationUsers") paginationNormalUsers: MdbTablePaginationComponent; @ViewChild("row") row: ElementRef;
headElements = ["#", "Usuario", "Nombres", "Apellidos", "Correo", "Estado", "Acción"];
sortByElements = ["#", "userName", "firstName", "lastName", "email", "estado", "action"];
searchText = "";
previous: string;
keyword = "de";
maxVisibleItems = 5;
// END DATATABLE PROPERTIES
public existsRegisteredUsers = true;
public existsRegisteredAdmins = true;
public optionsToast = { toastClass: "opacity" };
ngUnsubscribe = new Subject<void>();
public groupsAdmin: Observable<GroupGame[]>;
public groupsUser: GroupGame[] = [];
public admins: User[] = [];
public users: User[] = [];
public user: User;
public isUserAdmin = false;
public group: GroupGame;
public showWelcomeUser = true;
public iterationValue = 1;
//TAB 1 == ADMIN USERS , TAB2 NORMAL USERS
public selectedTab = 1;
elements: any = [];
constructor(
private groupService: GroupService,
private userService: UserService,
private gameService: GameService,
private authService: AuthService,
private socketGroupGame: SocketGroupGameService,
private router: Router,
private logger: NGXLogger,
private spinner: NgxSpinnerService,
private cdRef: ChangeDetectorRef,
private toast: ToastService
) {}
@HostListener("input") oninput() {
if (this.selectedTab === 1) {
this.mdbTablePagination.searchText = this.searchText;
} else {
this.paginationNormalUsers.searchText = this.searchText;
}
this.searchElements();
}
searchElements() {
const prev = this.mdbTable.getDataSource();
if (!this.searchText) {
this.mdbTable.setDataSource(this.previous);
if (this.selectedTab === 1) {
this.admins = this.mdbTable.getDataSource();
} else {
this.users = this.mdbTable.getDataSource();
}
}
if (this.searchText) {
if (this.selectedTab === 1) {
this.admins = this.mdbTable.searchLocalDataBy(this.searchText);
} else {
this.users = this.mdbTable.searchLocalDataBy(this.searchText);
}
this.mdbTable.setDataSource(prev);
}
}
ngOnInit() {
this.user = this.authService.getUser();
this.isUserAdmin = this.authService.userIsAdmin();
this.spinner.show();
this.createContentDashboard(this.isUserAdmin);
}
ngAfterViewInit(): void {
if (this.isUserAdmin && this.mdbTable) {
this.mdbTablePagination.setMaxVisibleItemsNumberTo(this.maxVisibleItems);
this.paginationNormalUsers.setMaxVisibleItemsNumberTo(this.maxVisibleItems);
this.paginationAdmins();
this.paginationUsers();
this.cdRef.detectChanges();
}
}
paginationAdmins() {
this.mdbTablePagination.calculateFirstItemIndex();
this.mdbTablePagination.calculateLastItemIndex();
}
paginationUsers() {
this.paginationNormalUsers.calculateFirstItemIndex();
this.paginationNormalUsers.calculateLastItemIndex();
}
createContentDashboard(userIsAdmin) {
if (!userIsAdmin) {
this.getGroupsOfCurrentUser();
} else {
this.socketGroupGame.connect();
this.getGroupsAdmin();
this.getAllUsers();
}
}
getGroupsAdmin() {
this.groupsAdmin = this.groupService.getGroups();
}
getAllUsers() {
this.userService
.getUsers()
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe(users => {
this.users = users;
this.users = this.userService.filterUsersByRol(users, RoleEnum.User);
this.admins = users;
this.admins = this.userService.filterUsersByRol(users, RoleEnum.Admin);
if (this.mdbTable) {
this.mdbTable.setDataSource(this.admins);
this.admins = this.mdbTable.getDataSource();
this.previous = this.mdbTable.getDataSource();
}
if (this.admins.length === 0) {
this.existsRegisteredAdmins = false;
}
this.spinner.hide();
});
}
selectTabAdmins(event: any) {
if (this.selectedTab !== 1) {
this.selectedTab = 1;
if (this.mdbTable) {
this.mdbTable.setDataSource(this.admins);
this.admins = this.mdbTable.getDataSource();
this.previous = this.mdbTable.getDataSource();
}
if (this.admins.length === 0) {
this.existsRegisteredAdmins = false;
}
}
}
selectTabUsers(event: any) {
this.selectedTab = 2;
if (this.mdbTable) {
this.mdbTable.setDataSource(this.users);
this.users = this.mdbTable.getDataSource();
this.previous = this.mdbTable.getDataSource();
this.paginationUsers();
this.cdRef.detectChanges();
}
if (this.users.length === 0) {
this.existsRegisteredUsers = false;
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.4
- Device: Laptop
- Browser: Chrome
- OS: Linux
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years ago
I'm afraid it won't be possible because the second tabs probably gets different data and is not aware of the state change. But it depends on what exactly you are trying to achieve in this case. Could you provide an example html/ts code?
Moises Trigueros free commented 4 years ago
I have attached the code, thanks for the help in advance!