Pagination

Pagination

This pattern defines how pagination behaves within content views. When present, pagination is consistent across all three content views.

  • Pagination is optional.
    • Pagination is not necessary when there is a small amount of content.
    • Pagination is not necessary when an application uses “lazy load” to load content as a user scrolls.
    • Pagination is not displayed when there is no data to display.
  • When included, the pagination control should be present both above and below the relevant content view so users may navigate between pages without needing to scroll.
  • Pagination can be “sticky” and remain fixed to the bottom of a user’s browser.
    • A sticky footer is not recommended for views with content below pagination.

Pagination - Table View

Pagination Overview

Pagination - List View

Pagination Overview

Pagination - Card View

Pagination Overview

Pagination

Pagination should be located above and below the relevant content view whenever pagination is supported.

Pagination Callouts

  1. Upper Pagination Control: A pagination control is included in the toolbar above the list.
  2. Pagniation Footer: The pagination footer contains Items per Page and Pagination controls and is appended to the bottom of the view.

Pagination Callouts

  1. Items per Page: This control displays the number of items on a page.
    • It includes an option to modify the number of items displayed. It is recommended that the default number be less than 25 in order to minimize scrolling.
  2. Items Displayed: This count displays the items currently in view.
  3. Navigate Pages: These controls allow the user to navigate to the previous or first page.
    • These controls are disabled when the user is on the first page.
  4. Current Page: This control displays the current page and allows users to navigate to a specific page.
  5. Total Pages: This count displays the total number of pages.
  6. Navigate Pages: These controls allow the user to navigate to the next or last page.
    • These controls are disabled when the user is on the last page.

Pagination - Content Below

Pagination Content Below

  1. Content Below: A sticky footer is not recommended for views with content below pagination.
  2. Items per Page: It is recommended that the default number of items displayed be less than 25 in order to minimize scrolling.
    • Allowing users to change the default number should be optional.

Pagination - No Data

Pagination Select 7

  • No Data: Pagination is not displayed when there is no data to page.

Selection While Paging

Items remain selected even as a user pages.

PatternFly Core Example


Pagination

per page
1-15 of 75
of 5

Reference Markup

<form class="content-view-pf-pagination  clearfix" id="">
  <div class="form-group">
    <select class="selectpicker pagination-pf-pagesize">
      <option value="6">6</option>
      <option value="10" >10</option>
      <option value="15" >15</option>
      <option value="25">25</option>
      <option value="50">50</option>
    </select>
    <span>per page</span>
  </div>
  <div class="form-group">
    <span><span class="pagination-pf-items-current">1-15</span> of <span class="pagination-pf-items-total">75</span></span>
    <ul class="pagination pagination-pf-back">
      <li class="disabled"><a href="#" title="First Page"><span class="i fa fa-angle-double-left"></span></a></li>
      <li class="disabled"><a href="#" title="Previous Page"><span class="i fa fa-angle-left"></span></a></li>
    </ul>
    <label for="-page" class="sr-only">Current Page</label>
    <input class="pagination-pf-page" type="text" value="1" id="-page"/>
    <span>of <span class="pagination-pf-pages">5</span></span>
    <ul class="pagination pagination-pf-forward">
      <li><a href="#" title="Next Page"><span class="i fa fa-angle-right"></span></a></li>
      <li><a href="#" title="Last Page"><span class="i fa fa-angle-double-right"></span></a></li>
    </ul>
  </div>
</form>