Pagination

Purpose

Pagination enables customers to navigate back and forth through multiple pages of related content, such as tables, filtered lists or search results, when the content does not fit on one page.

Usage

Our pagination is characterized by the following features:

Large clickable areas
Easily identifiable current page
Page links with enough space between them
“Previous” and “Next” page buttons as bookends
First and last page links remain persistent on either side of the other page links

Requirements

The DLS pagination component requires both dls.css and dls.js due to the complexities involved with its logic, functionality, and animations.

Specs

Selected Fill = Bright Blue
Hover background = Gray 02
Font = Body 1, Bright Blue, White (active), Gray 04 (disabled)
Glyph = Large, Bright Blue (active), Gray 03 (disabled)
Alignment = Center aligned within the container
Pagination = Limit to an odd number of links on 1 line, maximum number of links, including ellipsis, is 13
Breakpoint = Screens 375px and less will have the words “Next” and “Previous” removed

Specs - Pagination - Desktop

Specs - Pagination - Mobile

Example - Pagination

Copy

<div id="pagination-demo" class="pagination"
     data-toggle="pagination"
     data-current="1"
     data-total="107"
     data-url="#"
>
  <button class="flex flex-align-center prev btn-utility-wrapper" aria-label="previous">
    <span class="btn btn-tertiary btn-utility">
      <span class="glyph icon-hover dls-glyph-left"></span>
      <span class="hidden-sm-down">Previous</span>
    </span>
  </button>

  <div class="page-list">
    <!-- If pagination contains link, js sets <ul> to role=navigation, otherwise set to role="group" -->
    <ul class="pages">
      <li class="selector"></li>
      <!-- List items generated here -->
    </ul>
  </div>

  <button class="flex flex-align-center next btn-utility-wrapper" aria-label="next">
    <span class="btn btn-tertiary btn-utility">
      <span class="hidden-sm-down">Next</span>
      <span class="glyph icon-hover dls-glyph-right"></span>
    </span>
  </button>
  <span class="sr-only" aria-live="polite"></span>
</div>

Functionality

If you are using dls.js, reference the attributes below for functionality.

Attribute Name	Options	Description	Required
`data-toggle`	`pagination`	Creates a pagination object; required for dls.js functionality.	yes
`data-total`	`number`	Total number of pagination links to be generated. If not provided, default total is 10.	no
`data-current`	`number between 1 and total`	Currently highlighted pagination item. If not provided, default total is 1.	no
`data-url`	`string`	Url to be applied to pagination links.	yes
`data-skip-first-txt`	`string`	Alt language for screen reader message on the first item when left ellipses are present. If not set, default is "Skip to first page".	no
`data-skip-last-txt`	`string`	Alt language for screen reader message on the last item when right ellipses are present. If not set, default is "Skip to last page".	no
`data-buttons`	`bool`	Pagination elements render as buttons instead of links for in-page pagination.	no

Function Name	Parameters	Description	Required
`pagination.getCurrent()`	`none`	Get the index of the currently selected page number (page - 1).	no
`pagination.setCurrent(i)`	`page number list index`	Set the index of the currently selected page number (page - 1).	no