Table Pagination with Tabs

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 enter image description here

Second tab(the total of registers in second tab is 16, max limit pagination = 5) enter image description here

Arkadiusz Idzikowski staff commented 5 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 commented 5 years ago

I have attached the code, thanks for the help in advance!

Add comment

Bartosz Termena staff answered 5 years ago

2 0 Best answer

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 commented 5 years ago

Works :) , thank so much again , Bartosz - I owe you one

Best Regards, Moises.

Add comment

Moises Trigueros answered 5 years ago

0 0 Best answer

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;
    }
}

Add comment

Moises Trigueros answered 5 years ago

0 0 Best answer

<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>

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

User: 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

Moises Trigueros

47Support score
3Questions 3Answers

0Snippets likes 0Snippets