ClrDatagrid сохраняет состояние пагинации при маршрутизации - PullRequest
Новая
       6

ClrDatagrid сохраняет состояние пагинации при маршрутизации

1 голос
/ 23 января 2020

Есть ли способ для ClrDatagrid сохранить состояние нумерации страниц после перехода от маршрутов моих приложений и обратно к ним? Если у меня есть многостраничный сервер данных, он не запоминает страницу, на которой он находился при переходе. Он всегда возвращается на страницу 1.

1 Ответ

3 голосов
/ 24 января 2020

Таким образом, отрабатывая 2 комментария выше, я использовал двухстороннюю привязку вместе с сохранением / извлечением страницы из sessionStorage, чтобы запомнить страницу между переходами. Работает отлично. Извлеченный урок, чтобы детализировать документы по рассматриваемому элементу: разбиение на страницы - ClrDgPage. Спасибо за помощь.

Вот код из моего компонента TS. Var currentPage используется для привязки к ClrDgPage: 

  currentPage: number = 1;

  constructor(private employeeService: EmployeeService,
              private router: Router) {
  }

  ngOnInit() {
    let lastPage = sessionStorage.getItem("employee-current-page");
    if (lastPage) {
      this.currentPage = parseInt(lastPage);
    }
  }

  refresh(state: ClrDatagridStateInterface) {
    this.loading = true;
    this.lastState = state;
    sessionStorage.setItem("employee-current-page", this.currentPage.toString())
    this.employeeService.listForGrid(state).subscribe((result) => {
        this.employees = result.content;
        this.total = result.totalElements;
        this.loading = false;
      },
      (error1) => {
        console.log(error1);
        this.loading = false;
      });
  }

И код от компонента html:

<clr-datagrid #datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading" >

<clr-dg-pagination #pagination [clrDgPageSize]="20" [clrDgTotalItems]="total" [(clrDgPage)]="currentPage">
  <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Employees per page</clr-dg-page-size>
  {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
  of {{total}} employees
</clr-dg-pagination>
...