openproject/frontend/app/components/table-pagination/table-pagination.component.html

<div class="pagination" *ngIf="pagination && pagination.total">
  <nav class="pagination--pages">
    <ul class="pagination--items">

      <li [hidden]="pagination.page == 1" class="pagination--item">
        <a (click)="showPage(pagination.page - 1)"
           rel="prev start"
           [attr.aria-label]="text.label_previous"
           data-click-on-keypress="[13, 32]"
           id= "pagination--prev-link"
           role="link">&#60;</a>
      </li>

      <ng-container *ngIf="prePageNumbers.length > 0">
        <li *ngFor="let pageNumber of prePageNumbers"
          class="pagination--item">
          <a (click)="showPage(pageNumber)"
            rel="next"
            data-click-on-keypress="[13, 32]"
            role="link"
            [textContent]="pageNumber"></a>
        </li>
        <li class="pagination--space">…</li>
      </ng-container>

      <ng-container *ngIf="pageNumbers.length > 1">
        <li *ngFor="let pageNumber of pageNumbers"
            [ngClass]="{ '-current': pageNumber == pagination.page }"
            class="pagination--item pagination-number">
          <em *ngIf="pageNumber == pagination.page">{{ pageNumber }}</em>
          <a *ngIf="pageNumber != pagination.page"
            (click)="showPage(pageNumber)"
            data-click-on-keypress="[13, 32]"
            rel="next"
            role="link"
            [textContent]="pageNumber"></a>
        </li>

        <li *ngIf="postPageNumbers.length" class="pagination--space">…</li>
      </ng-container>

      <ng-container *ngIf="postPageNumbers.length">
        <li *ngFor="let pageNumber of postPageNumbers" class="pagination--item pagination-number">
          <a (click)="showPage(pageNumber)"
            rel="next"
            data-click-on-keypress="[13, 32]"
            role="link"
            [textContent]="pageNumber"></a>
        </li>
      </ng-container>

      <li [hidden]="!(pagination.total && pagination.page < pageNumbers[pageNumbers.length - 1])"
        class="pagination--item">
        <a (click)="showPage(pagination.page + 1)"
           rel="next"
           class="pagination--next-link"
           [attr.aria-label]="text.label_next"
           data-click-on-keypress="[13, 32]"
           id="pagination--next-link"
           role="link">&#62;</a>
      </li>

      <li class="pagination--range">
        <span [textContent]="currentRange"></span>
        <span *ngIf="pageNumbers.length === 1"
              id="pagination-empty-text"
              tabindex="0"
              class="hidden-for-sighted"
              [textContent]="text.no_other_page"></span>
      </li>
    </ul>
  </nav>

  <div class="pagination--options" *ngIf="perPageOptions.length > 0 && pagination.total > perPageOptions[0]">
    <ul class="pagination--items">
      <li class="pagination--label" [textContent]="text.per_page" title="{{ text.per_page }}"></li>

      <li *ngFor="let perPageOption of perPageOptions"
          [ngClass]="{ '-current': perPageOption == pagination.perPage }"
          class="pagination--item">

       <span *ngIf="perPageOption != pagination.perPage">
         <a (click)="selectPerPage(perPageOption)"
            data-click-on-keypress="[13, 32]"
            role="link"
            [textContent]="perPageOption"></a>
       </span>

       <span *ngIf="perPageOption == pagination.perPage">{{ perPageOption }}</span>
      </li>
    </ul>
  </div>
</div>