Постраничная навигация Ангуляр Постраничная навигация Ангуляр angular pager paging

Постраничная навигация Ангуляр

Open in new window

Пагинация

Создаем компонент для пагинатора.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pager',
  templateUrl: './pager.component.html'
})
export class PagerComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Вставляем компонент.

<app-pager></app-pager>

Шаблон.

<nav>
  <ul class="pagination">
    <li class="page-item">
        <a href="#" class="page-link"  (click)="setPage(1)">First</a>
    </li>
    <li>
        <a href="#" class="page-link">Previous</a>
    </li>

    <li>
       <a class="page-link" (click)="setPage(currentPage+1)">Last</a>
    </li>
  </ul>
</nav>

pager angular

Добавим входные переменные и определим ф-цию перехода на страницу.

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-pager',
  templateUrl: './pager.component.html'
})
export class PagerComponent implements OnInit {

  @Input() total: any;
  @Input() perPage: number;
  @Input() currentPage: number;

  constructor() { }

  ngOnInit() {
  }

  setPage(page: number){
      console.log(this.items);
      console.log(this.perPage);
      console.log(this.currentPage);
  }

}

Передадим переменные в компонент.

<app-pager [total]="total" [perPage]="perPage" [currentPage]="currentPage" ></app-pager>

Создадим сервис, генерирующий событие.

import {Subject} from "rxjs/Rx";
import { Injectable } from '@angular/core';


@Injectable()
export class PagerService {
  private _emmiter = new Subject();
  subscriber$ = this._emmiter.asObservable();

  emmitPageEvent(page: number){
    this._emmiter.next(page);
  }
}

Сгенерируем событие по клику на ссылки.

import { Component, OnInit, Input } from '@angular/core';
import { PagerService } from './pager.service';

@Component({
  selector: 'app-pager',
  templateUrl: './pager.component.html'
})
export class PagerComponent implements OnInit {

  @Input() total: any;
  @Input() perPage: number;
  @Input() currentPage: number;

  constructor(private pager_service: PagerService) { }

  ngOnInit() {
  }

  setPage(page: number){
      this.pager_service.emmitPageEvent(page);
      this.currentPage = page;
  }

}

Добавим сервис в модуль.

providers: [
    DocumentService,
    LoginService,
    PagerService

  ],

Подпишем компонент списка на событие пейджера.

  ngOnInit() {
    this.pager.subscriber$.subscribe((page: number) => {
        this.setPage(page);
    });
    this.setPage(1);
  }

  setPage(page: number) {
    this.currentPage = page;
    this.service.getCompanyList((page-1) * this.perPage, this.perPage).subscribe(
      (res: any) => {
        this.items = res.results;
        this.total = res.count;
      }
    );

Добавим модуль форм.

import { FormsModule } from ‘@angular/forms’;

@NgModule({
  declarations: [CompanyComponent, FormComponent, ListComponent, ShowComponent,PagerComponent],
  imports: [
    CommonModule,
    FormsModule
  ]
})
export class CompanyModule { }

Вставим инпут для ввода произвольной страницы.

<nav>
  <ul class="pagination">
    <li class="page-item">
        <a class="page-link"  (click)="setPage(1)">Назад</a>
    </li>

    <li>
      <input class="page-link" #page (keyup)="setPage(page.value)" [(ngModel)]="currentPage" name="current_page">
    </li>
    <li>
        <a class="page-link" (click)="setPage(currentPage+1)">Вперед</a>
    </li>
  </ul>
</nav>

Выведем всего записей.

<li class="page-link">
  Всего записей: {{ total }} страниц {{ total/perPage  }}
</li>

Создадим и задействуем функцию расчета списка страниц, ближайших к текущей.

import { Component, OnInit, Input } from '@angular/core';
import { PagerService } from './pager.service';

@Component({
  selector: 'app-pager',
  templateUrl: './pager.component.html',
  styleUrls: ['./pager.component.sass']
})
export class PagerComponent implements OnInit {

  @Input() total: any;
  @Input() perPage: number;
  @Input() currentPage: number;
  page_list: any;

  constructor(private pager_service: PagerService) { }

  ngOnInit() {
    this.page_list = this.generatePagesList();
  }

  generatePagesList(){
    let totalPages = Math.ceil(this.total / this.perPage);
    let startPage: number, endPage: number;
    if (totalPages <= 10) {
      // less than 10 total pages so show all
      startPage = 1;
      endPage = totalPages;
    } else {
        if (this.currentPage <= 6) {
          startPage = 1;
          endPage = 10;
      } else if (this.currentPage + 4 >= totalPages) {
          startPage = totalPages - 9;
          endPage = totalPages;
      } else {
          startPage = this.currentPage - 5;
          endPage = this.currentPage + 4;
      }
      let pages = Array.from(Array((endPage + 1) - startPage).keys()).map(i => startPage + i);
      return pages;
    }
  }

  setPage(page: number){
      this.pager_service.emmitPageEvent(page);
      this.currentPage = page;
      this.page_list = this.generatePagesList();
  }

}

Расшарим этот компонент среди всех модулей, создав SharedModule.

import { NgModule }  from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { PagerComponent } from './pager/pager.component';


@NgModule({
  imports: [ CommonModule, FormsModule],
  exports : [
    CommonModule,
    FormsModule,
    PagerComponent
  ],
  declarations: [ PagerComponent ],
})
export class SharedModule { }

Other topics