2 mat-paginator для одного источника данных - PullRequest
Новая
       15

2 mat-paginator для одного источника данных

0 голосов
/ 26 января 2019

У меня есть таблица соответствия, которая может отображать до 100 записей на странице. Сначала у меня был один коврик в нижней части, который работал нормально. Теперь меня просят установить paginator вверху и еще один внизу таблицы, чтобы пользователю не приходилось прокручивать весь путь вниз, чтобы добраться до paginator, если он ищет запись, которая находится в вершина.
Дело в том, что оба пагинатора должны быть связаны с одним и тем же источником данных. Я попытался дать разные идентификаторы для каждого из них, используя ViewChild, чтобы получить их и назначить одному и тому же источнику данных, но он работает только с одним из них.

main.component.ts: 

    flights: Flight[] =[];
    dataSource = new MatTableDataSource<Flight>(this.flights);
    @ViewChild('PAGINATOR') paginator: MatPaginator;
    @ViewChild('OTROPAGINATOR') paginatorOtro: MatPaginator;

main.component.html: 

   <mat-paginator #PAGINATOR (page)="pageEvent = handlePage($event)" 
   [length]="length" [pageSizeOptions]="[25, 50, 100]" showFirstLastButtons> 
   </mat-paginator>

   <table mat-table ...> ... </table>

  <mat-paginator #OTROPAGINATOR (page)="pageEvent = handlePage($event)" 
  [length]="length" [pageSizeOptions]="[25, 50, 100]" showFirstLastButtons> 
  </mat-paginator>

Связывание страниц с источником данных: 

    this.dataSource = new MatTableDataSource<Flight>(this.flights);
    this.dataSource.paginator = this.paginator;
    this.dataSource.paginator = this.paginatorOtro;

Может кто-нибудь наставить меня в этом, пожалуйста?

1 Ответ

0 голосов
/ 28 января 2019

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

Кроме того, я не мог установить индекс страницы или элементы для свойств страницы напрямую (таблица не обновлялась), поэтому все перемещения выполняются с помощью некоторых методов логики и разбивки на страницы, таких как previousPage () или lastPage ().

Единственное ограничение заключается в том, что внизу страницы нет возможности изменять элементы на странице, поскольку нет способа, позволяющего мне управлять этим свойством.

Вы можете увидеть результат здесь . Спасибо FabianKüng за решение об использовании двух источников данных и синхронизации обоих пагинаторов.

Надеюсь, это кому-нибудь пригодится.

...