@ui-grid/pagination/src/templates/pagination.html

This module provides pagination support to ui-grid

<div
  class="ui-grid-pager-panel"
  ui-grid-pager
  ng-show="grid.options.enablePaginationControls">
  <div
    role="navigation"
    class="ui-grid-pager-container">
    <div
      class="ui-grid-pager-control">
      <button
        type="button"
        class="ui-grid-pager-first"
        ui-grid-one-bind-title="aria.pageToFirst"
        ui-grid-one-bind-aria-label="aria.pageToFirst"
        ng-click="pageFirstPageClick()"
        ng-disabled="cantPageBackward()">
        <div
          ng-class="grid.isRTL() ? 'last-triangle' : 'first-triangle'">
          <div
            ng-class="grid.isRTL() ? 'last-bar-rtl' : 'first-bar'">
          </div>
        </div>
      </button>
      <button
        type="button"
        class="ui-grid-pager-previous"
        ui-grid-one-bind-title="aria.pageBack"
        ui-grid-one-bind-aria-label="aria.pageBack"
        ng-click="pagePreviousPageClick()"
        ng-disabled="cantPageBackward()">
        <div ng-class="grid.isRTL() ? 'last-triangle prev-triangle' : 'first-triangle prev-triangle'"></div>
      </button>
      <input
        type="number"
        ui-grid-one-bind-title="aria.pageSelected"
        ui-grid-one-bind-aria-label="aria.pageSelected"
        class="ui-grid-pager-control-input"
        ng-model="grid.options.paginationCurrentPage"
        min="1"
        max="{{ paginationApi.getTotalPages() }}"
        step="1"
        required />
      <span
        class="ui-grid-pager-max-pages-number"
        ng-show="paginationApi.getTotalPages() > 0">
        <abbr
          ui-grid-one-bind-title="paginationOf">
          /
        </abbr>
        {{ paginationApi.getTotalPages() }}
      </span>
      <button
        type="button"
        class="ui-grid-pager-next"
        ui-grid-one-bind-title="aria.pageForward"
        ui-grid-one-bind-aria-label="aria.pageForward"
        ng-click="pageNextPageClick()"
        ng-disabled="cantPageForward()">
        <div ng-class="grid.isRTL() ? 'first-triangle next-triangle' : 'last-triangle next-triangle'"></div>
      </button>
      <button
        type="button"
        class="ui-grid-pager-last"
        ui-grid-one-bind-title="aria.pageToLast"
        ui-grid-one-bind-aria-label="aria.pageToLast"
        ng-click="pageLastPageClick()"
        ng-disabled="cantPageToLast()">
        <div ng-class="grid.isRTL() ? 'first-triangle' : 'last-triangle'">
          <div ng-class="grid.isRTL() ? 'first-bar-rtl' : 'last-bar'">
          </div>
        </div>
      </button>
    </div>
    <div
      class="ui-grid-pager-row-count-picker"
      ng-if="grid.options.paginationPageSizes.length > 1 && !grid.options.useCustomPagination">
      <select
        ui-grid-one-bind-aria-labelledby-grid="'items-per-page-label'"
        ng-model="grid.options.paginationPageSize"
        ng-options="o as o for o in grid.options.paginationPageSizes"></select>
      <span
        ui-grid-one-bind-id-grid="'items-per-page-label'"
        class="ui-grid-pager-row-count-label">
        &nbsp;{{sizesLabel}}
      </span>
    </div>
    <span
      ng-if="grid.options.paginationPageSizes.length <= 1"
      class="ui-grid-pager-row-count-label">
      {{grid.options.paginationPageSize}}&nbsp;{{sizesLabel}}
    </span>
  </div>
  <div
    class="ui-grid-pager-count-container">
    <div
      class="ui-grid-pager-count">
      <span
        ng-show="grid.options.totalItems > 0">
        {{ 1 + paginationApi.getFirstRowIndex() }}
        <abbr
          ui-grid-one-bind-title="paginationThrough">
          -
        </abbr>
        {{ 1 + paginationApi.getLastRowIndex() }} {{paginationOf}} {{grid.options.totalItems}} {{totalItemsLabel}}
      </span>
    </div>
  </div>
</div>