@ds3

Как при фильтрации данных сделать переход на первую страницу?

Если при выполнения фильтра будет открыта последняя или какая-либо другая страница кроме первой, то отфильтрованные данные не будут отображаться. И чтобы их отобразить нужно используя пагинацию перейти на первую страницу. Я пробовал в функцию фильтра просто добавить переход на первую страницу если будет выполнено эта операция. Но переход хоть и осуществляется но возникает проблема в том что количество отфильтрованных данных отображается неверное и из-за этого стрелка назад активна, что бы это исправить нужно нажать на неё один раз.
5d81e8ff2ec4d293225360.png
Как правильно сделать чтобы при фильтрации данных переход осуществлялся на первую страницу если на данный момент находится на какой-либо другой?

ts:

applyFilter() {
  let searchFilter: any = {
    filterValue: this.search
  };
  this.page = 1;
  this.categories.filter = searchFilter;
  this.load();
}

private load() {
  const params = {
    search: this.search,
    pageSize: this.pageSize,
    page: this.page
  };
  this.loading = true;
  this.isActive = false;
  this.sprCategoriesService.fetch(params).subscribe(categories => {
    this.loading = false;
    this.isActive = true;
    this.categories = categories.sprCategories;
    this.totalItems = categories.rowCount;
  }, error => {
    this.loading = false;
    this.isActive = true;
    this.toast.error(error.error.message);
  })
}

onPaginateChange(event) {
  this.page = event.pageIndex + 1;
  this.pageSize = event.pageSize;
  this.load();
}


html:

<mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="totalItems" [pageSize]="pageSize (page)="onPaginateChange($event)" showFirstLastButtons [disabled]="!isActive">
</mat-paginator>
  • Вопрос задан
  • 81 просмотр
Пригласить эксперта
Ответы на вопрос 1
VK_31
@VK_31
Постоянно учусь
При установке this.page = 1 mat-paginator переходит на вторую страницу. Получается что у mat-paginator нумерация страниц начинается с 0, т.е. первая страница имеет индекс 0. А в sprCategoriesService нумерация начинается с 1.
Попробуй изменить код на следующий:
applyFilter() {
  let searchFilter: any = {
    filterValue: this.search
  };
  this.page = 0;
  this.categories.filter = searchFilter;
  this.load();
}
private load() {
  const params = {
    search: this.search,
    pageSize: this.pageSize,
    page: this.page + 1
  };
.......
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы