FTSE Russell Styleguide

Pagination 

<nav aria-label="Pagination">
    <ul class="pagination">
        <li class="pagination__item pagination--first disabled">
            <a href=""><span>First</span></a>
        </li>
        <li class="pagination__item pagination--previous disabled">
            <a href=""><span> < </span></a>
        </li>

        <li class="pagination__item">
            <a href="#">
            <span>1</span>
        </a>
        </li>

        <li class="pagination__item">
            <a href="#">
            <span>2</span>
        </a>
        </li>

        <li class="pagination__item">
            <a href="#">
            <span>3</span>
        </a>
        </li>

        <li class="pagination__item active">
            <a href="#">
            <span>4</span>
        </a>
        </li>

        <li class="pagination__item">
            <a href="#">
            <span>5</span>
        </a>
        </li>

        <li class="pagination__item">
            <a href="#">
            <span>...</span>
        </a>
        </li>

        <li class="pagination__item">
            <a href="#">
            <span>10</span>
        </a>
        </li>

        <li class="pagination__item pagination--next">
            <a href=""><span> > </span></a></a>
        </li>
        <li class="pagination__item pagination--last">
            <a href=""><span>Last</span></a>
        </li>
    </ul>
</nav>
 
<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="pagination__item pagination--first{% if first_disabled %} disabled{% endif %}">
       <a href="{{page.href}}"><span>First</span></a>
    </li>
    <li class="pagination__item pagination--previous{% if previous_disabled %} disabled{% endif %}">
         <a href="{{page.href}}"><span> < </span></a>
    </li>
    {% for page in pages %}
    <li class="pagination__item{% if page.current %} active{% endif %}">
        <a href="{{page.href}}">
            <span>{{ page.label }}</span>
        </a>
    </li>
    {% endfor %}
    <li class="pagination__item pagination--next{% if next_disabled %} disabled{% endif %}">
      <a href="{{page.href}}"><span> > </span></a></a>
    </li>
    <li class="pagination__item pagination--last{% if last_disabled %} disabled{% endif %}">
       <a href="{{page.href}}"><span>Last</span></a>
    </li>
  </ul>
</nav>
 
{
  "next_disabled": null,
  "previous_disabled": true,
  "first_disabled": true,
  "last_disabled": null,
  "pages": [
    {
      "label": "1",
      "current": null,
      "href": "#"
    },
    {
      "label": "2",
      "current": null,
      "href": "#"
    },
    {
      "label": "3",
      "current": null,
      "href": "#"
    },
    {
      "label": "4",
      "current": true,
      "href": "#"
    },
    {
      "label": "5",
      "current": null,
      "href": "#"
    },
    {
      "label": "...",
      "current": null,
      "href": "#"
    },
    {
      "label": "10",
      "current": null,
      "href": "#"
    }
  ]
}
  • Content: 
    .pagination,
.pager {
  margin-top: $space-sm;
  margin-bottom: $space-xxl*2;
  display: flex;
  padding-left: 0;
  list-style: none;
  justify-content: center;

  li a {
    padding: 0;
  }


  span,
  .pages a,
  [class^="datatable-icon-"] {
    cursor: pointer;
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: $secondary;
    background-color: $white;
    border: 1px solid $gray-light;
    font-size: $font-size-sm;
    transition: all 0.2s ease-in-out;     
  }

  li.active {
    background-color: transparent;
  }

  a span:hover,
  a span:focus,
  .active a span,
  .pages a:hover,
  .pages a:focus,
  [class^="datatable-icon-"]:hover {
    background-color: $secondary;
    color: $white;
    border-color: $secondary;
    transition: all 0.2s ease-in-out;

    &::before {
      color: $white;
    }
  }

  .active a span {
    cursor: default;
  }

  li.pagination__item,
  li {
    color: $gray-light;
    display: none !important;

    &.active,
    &:nth-child(-n+3),
    &:nth-last-child(-n+3) {
      display: block !important;
    }

    @include mq(400px) {
      &:nth-child(-n+4),
      &:nth-last-child(-n+4) {
        display: block !important;
      }
    }

    @include mq($breakpoint-md) {
      display: block !important;
    }
  }

  &--first {
    @include mq($breakpoint-xs) {
      margin-right: $space-lg;
    }

    span {
      border-radius: $border-radius 0 0 $border-radius;

      @include mq($breakpoint-xs) {
        border-radius: $border-radius;
      }
    }   

  }

  &--last {
    @include mq($breakpoint-xs) {
      margin-left: $space-lg;
    }

    span {
      border-radius: 0 $border-radius $border-radius 0;

      @include mq($breakpoint-xs) {
        border-radius: $border-radius;
      }
    } 
  }


  &--next a span {
    @include mq($breakpoint-xs) {
      border-radius: 0 $border-radius $border-radius 0;
    }
  }

  &--previous a span {
    @include mq($breakpoint-xs) {
      border-radius: $border-radius 0 0 $border-radius;
    }
  }

  .disabled {
    cursor: not-allowed;
    opacity: 0.5;
    
    a {
      cursor: not-allowed;
      text-decoration: none;
      pointer-events: none;
    }

    span {
      cursor: not-allowed;
      color: $gray-light;
      background-color: $white;
      border: 1px solid $gray-light;
    }
  }

  [class^="datatable-icon-"]:before, [class*=" datatable-icon-"]:before {
    height: 0.5rem;
    width: 0.5rem;
    color: $secondary;
    left:0px;
  }

  .datatable-icon-prev::before {
    content:"First";
    border: none;
    transform: rotate(0deg);
    width: auto;
    height: auto;
    top:0;
  }

  .datatable-icon-skip::before {
    content:"Last";
    border: none;
    transform: rotate(0deg);
    width: auto;
    height: auto;
    top:0;
  }
}

.pager {
  li {
    &.disabled {
      color: $gray-light;

      i {
        &::before {
          color: $gray-light;
        }
      }
    }

    &.active {
      a {
        background-color: $secondary;
        color: $white;
        border-color: $secondary;
        transition: all 0.2s ease-in-out;
      }
    }

    &:first-child {
      margin-right: $space-lg !important;
    }

    &:nth-child(2) {
      i {
        border-radius: $border-radius 0 0 $border-radius;
      }
    }

    &:nth-last-child(2) {
      i {
        border-radius: 0 $border-radius $border-radius 0;
      }
    }

    &:last-child {
      margin-left: $space-lg !important;
    }

    &:first-child,
    &:last-child {

      i {
        border-radius: $border-radius;

        &::before {
          font-style: normal;
        }
      }
    }
  }
}

.ngx-datatable .datatable-footer {
  .datatable-footer-inner {
    flex-wrap: wrap;
    height: auto !important;
  }

  .datatable-pager,
  .page-count {
    flex-basis: 100% !important;
  }

  .datatable-pager {
    text-align: center;

    .pager {
      display: flex !important;
      padding: $space-md 0 !important;
    }
  }
}

.ngx-datatable {
  .datatable-footer {
    .database-footer-custom-template {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-direction: row;
      flex-wrap: wrap;

      .datatable-pager {
        flex: inherit !important;
        flex-basis: initial !important;
      }

      .page-limit-container {
        margin-left: 1.25rem !important;
        display: flex;
        align-items: center;

        li{
          list-style: none;
          margin: auto;

          i {
            cursor: pointer;
            margin: auto;
            border-radius: 0.25rem;
            position: relative;
            display: block;
            padding: .5rem .75rem;
            margin-left: -1px;
            line-height: 1.25;
            color: $secondary;
            background-color: $white;
            border: 1px solid transparent;
            font-size: 0.875rem;
            transition: all 0.2s ease-in-out;
            font-style: normal;

            &:hover{
              background-color: $secondary;
              color: $white;
              border-color: $secondary;
              transition: all 0.2s ease-in-out;
            }
          }
        }
      }
    }
  }
}
  • URL: /components/raw/pagination/_pagination.scss
  • Filesystem Path: src/components/molecules/pagination/_pagination.scss
  • Size: 5.2 KB

Pagination for Angular using ngx pagination

This code example is based on http://michaelbromley.github.io/ngx-pagination/#/custom-template

<pagination-template #p="paginationApi"
                     [id]="config.id"
                     (pageChange)="config.currentPage = $event">


    <div class="custom-pagination">
        <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
            <a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
        </div>

        <div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
            <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
                <span></span>
            </a>
            <div *ngIf="p.getCurrent() === page.value">
                <span></span>
            </div>
        </div>

        <div class="pagination-next" [class.disabled]="p.isLastPage()">
            <a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
        </div>
    </div>

</pagination-template>

<ul class="meal-list">
    <li *ngFor="let meal of meals | paginate: config">

    </li>
</ul>