Pagination

application.hbs

//How to use

<Pagination
  @count={{@model.typefaces.meta.count}}
  @current={{this.page}}
  @perPage={{this.commonData.perPage}}
  @model={{@model.entity.slug}}
/>

<Pagination
  @count={{this.model.meta.count}}
  @current={{this.page}}
  @perPage={{this.commonData.perPage}}
/>

pagination.hbs

{{#if (gt this.totalPages 1)}}
  <nav class="flex justify-center relative z-0 my-4" aria-label="Pagination">
    {{#let "inline-flex items-center justify-center px-2 mx-1 font-display text-lg" as |commonClasses|}}
      {{#if this.previousPage}}
        <LinkTo
          @route={{this.router.currentRouteName}}
          @models={{if @model (array @model) (array)}}
          @query={{hash page=this.previousPage}}
          class={{commonClasses}}
          title="Предыдущая страница"
        >
          <MdIcon @icon="chevron-left" />
        </LinkTo>
      {{/if}}

      {{#each this.availablePages as |i|}}
        {{#if (eq @current i)}}
          <span class="{{commonClasses}} border rounded">{{i}}</span>
        {{else if (eq "..." i)}}
          <span class={{commonClasses}}>{{i}}</span>
        {{else}}
          <LinkTo
            @route={{this.router.currentRouteName}}
            @models={{if @model (array @model) (array)}}
            @query={{hash page=i}}
            class={{commonClasses}}
          >
            {{i}}
          </LinkTo>
        {{/if}}
      {{/each}}

      {{#if this.nextPage}}
        <LinkTo
          @route={{this.router.currentRouteName}}
          @models={{if @model (array @model) (array)}}
          @query={{hash page=this.nextPage}}
          class={{commonClasses}}
          title="Следующая страница"
        >
          <MdIcon @icon="chevron-right" />
        </LinkTo>
      {{/if}}
    {{/let}}
  </nav>
{{/if}}

pagination.js

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class PaginationComponent extends Component {
  @service router;

  numberPagesToShow = 2;

  get availablePages() {
    const availablePages = [];

    for (let i = 1; i <= this.totalPages; i++) {
      if (i === this.args.current) {
        availablePages.push(i);
      } else if (i < this.args.current && i >= (this.args.current - this.numberPagesToShow)) {
        availablePages.push(i);
      } else if (i > this.args.current && i <= (this.args.current + this.numberPagesToShow)) {
        availablePages.push(i);
      } else if (this.args.current > this.totalPages && i <= (this.args.current + this.numberPagesToShow)) {
        availablePages.push(i);
      }
    }

    const firstPage = availablePages[0];
    if (firstPage > 1) {
      if (firstPage - 1 > 1) {
        availablePages.unshift('...');
      }

      availablePages.unshift(1);
    }

    const lastPage = availablePages[availablePages.length-1];
    if (lastPage < this.totalPages) {
      if (lastPage + 1 < this.totalPages) {
        availablePages.push('...');
      }

      availablePages.push(this.totalPages);
    }

    return availablePages;
  }

  get totalPages() {
    return Math.ceil(this.args.count / this.args.perPage);
  }

  get previousPage() {
    return this.args.current > 1 ? this.args.current - 1 : null;
  }

  get nextPage() {
    return this.args.current < this.totalPages ? this.args.current + 1 : null;
  }
}