Построение постраничной навигации в Angular. Построение постраничной навигации в Angular. angular paging page pager

Построение постраничной навигации в Angular.

Open in new window

Постраничная навигация.

Определяем дополгительные переменные в компоненте.

export class DocumentComponent implements OnInit {

  items: any;
  count: number;
  next: string;
  prev: string;
  offset: number = 0;

Создадим функцию получения страницы.

  constructor(private http_service: DocumentService) { }

  getPage(offset: number) {
    this.http_service.getDocList(offset).subscribe((data: any) => {
      this.items = data['results'];
      this.count = data['count'];
      this.next = data['next'];
      this.prev = data['previous'];
      this.offset = offset;
    })
  }

Вызовем ее при инициализации компонента.

  ngOnInit() {

      this.getPage(this.offset);

  }

Доработаем сервис для использования новой переменной offset.

  getDocList(offset: number) {
    return this.http.get(API_URL+'api/documents?limit=10&offset='+offset);
  }

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

  <button *ngIf="prev" (click)="getPage(offset-10)"  >Previous</button>
  <button *ngIf="next" (click)="getPage(offset+10)"  >Next</button>

django rest framework angular pager

Изменим шаблон и выведем данные в таблицу.

  <div style="text-align: center">
    <button *ngIf="prev" (click)="getPage(offset-10)"  >Previous</button>
    <button *ngIf="next" (click)="getPage(offset+10)"  >Next</button>
  </div>


  <table class="table table-striped table-sm table-dark table-bordered  table-hover">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Date</th>
        <th scope="col">Title</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of items">
        <th>{{ item.id  }}</th>
        <td>{{ item.date  }}</td>
        <td>{{ item.title  }}</td>
      </tr>
    </tbody>
  </table>

  <div style="text-align: center">
    <button *ngIf="prev" (click)="getPage(offset-10)"  >Previous</button>
    <button *ngIf="next" (click)="getPage(offset+10)"  >Next</button>
  </div>

django rest framework angular pager

Other topics