Несколько пагинаторов на одном столе - PullRequest
Новая
       16

Несколько пагинаторов на одном столе

0 голосов
/ 08 апреля 2019

Я использую нумерацию страниц на моем столе, разработанном с использованием угловых материалов. Я сделал пагинацию на столе с помощью описанного здесь коврика-пагинатора: https://material.angular.io/components/paginator/overview

Он отлично работает на моем столе с одним пагинатором.

my_app.ts 

import { Component, ChangeDetectorRef, ViewChild, Input, OnChanges} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';
@ViewChild(MatPaginator) paginator: MatPaginator;

this.dataSource.data = this.tableData; // Assigning table data to datasource
this.dataSource.paginator = this.paginator;

my_app.html 

<table mat-table [dataSource]="dataSource" *ngIf="tableData.length > 0">

//Column definitions

</table>
<mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator> <!-- Pagination of table using mat-paginator. -->

если я сделаю что-то подобное.

my_app.html 

 <mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator> <!-- Pagination of table using mat-paginator. -->
<table mat-table [dataSource]="dataSource" *ngIf="tableData.length > 0">

//Column definitions

</table>

<mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator> <!-- Pagination of table using mat-paginator. -->

Только первая нумерация страниц работает, а вторая нумерация страниц не работает на одном столе.

Paginator выше таблицы выглядит следующим образом.

Paginator above the table Пагинатор под таблицей выглядит следующим образом.

Paginator below the table

Как вы можете видеть, paginator выше таблица работает нормально, но источник данных меняется ниже paginator и показывает данные как "0 из 0" даже после того, как источник данных тот же.

Я хочу связать оба пагинатора с данными таблиц, а также друг с другом.

Моя цель - чтобы оба пагинатора работали за одним столом. Если кто-либо меняет термины «pageSizeOptions» или «номера страниц», оба пагинатора должны меняться одновременно. Также изменяет страницы таблицы или номера строк на странице (как и ожидалось).

1 Ответ

1 голос
/ 11 мая 2019

В HTML 

<mat-paginator
    #paginatorTop
    [length]="dataSource.totalElements"
    [pageSize]="dataSource.pageSize"
    [pageSizeOptions]="[10, 25, 100]"
    [showFirstLastButtons]="true">
</mat-paginator>
<mat-table>...........</mat-table>
<mat-paginator
    #paginatorBottom
    [length]="dataSource.totalElements"
    [pageSize]="dataSource.pageSize"
    [pageSizeOptions]="[10, 25, 100]"
    [showFirstLastButtons]="true">
</mat-paginator>

В компоненте TS 

@ViewChild('paginatorTop') paginatorTop: MatPaginator;
@ViewChild('paginatorBottom') paginatorBottom: MatPaginator;


ngAfterViewInit() {
  this.paginatorTop.page.pipe(
    tap(() => { 
      this.loadCollection(
        this.paginatorTop.pageIndex,
        this.paginatorTop.pageSize,
        ...
        ...
        ...
      );
      this.paginatorBottom.pageIndex = this.paginatorTop.pageIndex;
      this.paginatorBottom.pageSize = this.paginatorTop.pageSize;
    })
  )
  .subscribe();

  this.paginatorBottom.page.pipe(
    tap(() => { 
      this.loadCollection(
        this.paginatorBottom.pageIndex,
        this.paginatorBottom.pageSize,
        ...
        ...
        ...
      );
      this.paginatorTop.pageIndex = this.paginatorBottom.pageIndex;
      this.paginatorTop.pageSize = this.paginatorBottom.pageSize;
    })
  )
  .subscribe();
}
...