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

Question

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

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

document.getElementById(elementId).scrollIntoView()

но если строка, по которой щелкнули, находится не на первой странице, элемент не найден, как я могу разбить страницу на страницы, где есть строка?

И вторая проблема - пользователь может отфильтровать таблицу, затем выбрать конкретную строку, если я сохраню номер страницы, когда он вернется на страницу таблицы, данные будут отображены без фильтра, а номер страницы будет неправильным

Answer 1

вы должны сохранить информацию о pageIndex при переходе на другую страницу, потому что когда вы возвращаетесь к своей таблице данных, вы должны присвоить этот индекс номеру [pageIndex].Пример:

<mat-paginator [length]="length"
          [pageSize]="pageSize"
          [pageSizeOptions]="pageSizeOptions"
          (page)="pageEvent = $event"
          [pageIndex]="pIndex">
</mat-paginator>

здесь pIndex - это переменная, которую я определяю в своем Компоненте.если ваш pageSize равен 10, а pageIndex равен 0, то он показывает от 1 до 10 строк ...

Для получения дополнительной информации: https://stackblitz.com/angular/ngdejmepgbr?file=app%2Fpaginator-configurable-example.html

Answer 2

Вам необходимо подключить paginator к маршрутизатору Angular.

Например, допустим, вы структурировали свой маршрут следующим образом:

http://my/url/to/table/component?page=2

В этом случае вы можете получить индекс страницы2 от URL к таблице следующим образом:

Класс компонента:

class MyComponent {

  pageIndex = this.activatedRoute.queryParams.pipe(
    map(params => params['page'])
  );

  constructor(activatedRoute: ActivatedRoute) {}
}

Шаблон:

<mat-paginator [pageIndex]="pageIndex | async"></mat-paginator>

До сих пор URL будет управлять таблицей.Теперь вам также необходимо обновить URL-адрес, когда пользователь перемещается по таблице с помощью paginator:

Шаблон:

<mat-paginator [pageIndex]="pageIndex | async" (page)="pageChange($event)"></mat-paginator>

Класс компонента:

class MyComponent {

  pageIndex = this.activatedRoute.queryParams.pipe(
    map(params => params['page'])
  )

  constructor(activatedRoute: ActivatedRoute, router: Router) {}

  pageChange(e: PageEvent): void {
    this.router.navigate( /* ... */ );
  }
}

Теперь, когдаURL обновляется, когда пользователь перемещается по таблице, что позволяет маршрутизатору затем управлять таблицей, когда пользователь возвращается к ранее посещенному URL.