Pager

A pager makes it possible to switch between comprehensible subsets of large amounts of data.

Usage

When to use

Use a pager in the following cases:

  • For tables with large ordered data sets.
  • When it is unsuitable to display all data on a single page.

Types

There are the following pager types:

Simple pager

The simple pager is recommended as standard pager.

pager-usage-behavior

1. First page example, 2. Current page example, 3. Last page example

Advanced pager

For lists and tables with large data sets, use the advanced pager for better readability.

pager-usage-types-advanced-pager

Advanced pager with page six as current page

General construction

All buttons used in the pager component are ghost buttons.

Simple pager

A simple pager consists of the following elements:

pager-usage-construction-simple-pager

1. Previous page button, 2. First page button, 3. Ellipsis, 4. Current page button, 5. Last page button, 6. Next page button
1. Previous page button
  • The previous page button is visible if the current page is not the first page.
2. First page button
  • The first page button is always visible.
3. Ellipsis
  • The ellipsis is visible if there are more than five pages in total.
4. Current page button
  • The current page button shows the number of the currently viewed page.
5. Last page button
  • The last page button is always visible and shows the total number of pages.
6. Next page button
  • The next page button is visible if the current page is not the last page.

Advanced pager

An advanced pager consists of the following elements:

pager-usage-construction-advanced-pager

1. Previous page button, 2. Current page input, 3. Next page button, 4. Page information, 5. Items per page
1. Previous page button
  • The previous page button is visible if the current page is not the first page.
2. Current page input
  • This numeric input shows the current page.
3. Next page button
  • The next page button is visible if the current page is not the last page.
4. Page information
  • The page information is showing the current and total page number.
5. Items per page
  • Consists of a label and a select.
  • The select menu contains predefined options for showing different quantities of items per page.

Behavior

Placement

The pager is placed in the main region. It is always positioned below the content it belongs to.

Do’s & Don’ts

pager-usage-do

pager-usage-dont

  • Use a pager to allow navigation to different pages of a large dataset.
  • Don’t use a pager when all data is shown on a single page.

Style

This chapter shows several pager styles in the design system.

Overview

pager-style-simple-pager-less-pages

Simple pager with less than six pages

pager-style-overview-simple-pager-ellipsis

Simple pager with one ellipsis

pager-style-overview-simple-pager

Simple pager with two ellipses

pager-style-overview-advanced-pager-first-page

Advanced pager with first page as current page

pager-style-overview-advanced-pager

Advanced pager with page six as current page

Typography

The following table gives reference to the different font sizes and weights:

NameStateFont-familyFont-sizeLine-heightText-align
Simple pager – all page numbers, ellipsisallSiemens Sans Roman14px16pxcenter
Advanced pager – Page informationallSiemens Sans Roman14px16pxleft
Advanced pager – Items per pageallSiemens Sans Roman14px16pxright

Sizing and spacing

The following measurements show the dimensions for this component:

Simple pager

The width of the page buttons is responsive to the button content (minimum 32px).

pager-style-sizing-simple-pager

Sizing for simple pager

pager-style-spacing-simple-pager

Spacing for simple pager

Advanced pager

pager-style-sizing-advanced-pager

Sizing for advanced pager

pager-style-spacing-advanced-pager

Spacing for advanced pager

To see a detailed explanation of all existing classes, please refer to the usage table below.

Pager: first page

<div class="pager">
    <ul>
        <li class="pager__page is-current">
            <a href="#">1</a>
        </li>
        <li class="pager__page">
            <a href="#">2</a>
        </li>
        <li class="pager__page">
            <a href="#">3</a>
        </li>
        <li class="pager__page">
            <a href="#">...</a>
        </li>
        <li class="pager__page">
            <a href="#">12</a>
        </li>
        <li class="pager__page pager__lastPage">
            <a href="#">
                <span class="iconMdsp arrowSingleRight"></span>
            </a>
        </li>
    </ul>
</div>

Pager: middle page

<div class="pager">
    <ul>
        <li class="pager__page pager__firstPage ">
            <a href="#">
                <span class="iconMdsp arrowSingleLeft"></span>
            </a>
        </li>
        <li class="pager__page">
            <a href="#">1</a>
        </li>
        <li class="pager__page">
            <a href="#">2</a>
        </li>
        <li class="pager__page is-current">
            <a href="#">3</a>
        </li>
        <li class="pager__page">
            <a href="#">...</a>
        </li>
        <li class="pager__page">
            <a href="#">12</a>
        </li>
        <li class="pager__page pager__lastPage">
            <a href="#">
                <span class="iconMdsp arrowSingleRight"></span>
            </a>
        </li>
    </ul>
</div>

Pager: last page

<div class="pager">
    <ul>
        <li class="pager__page pager__firstPage">
            <a href="#">
                <span class="iconMdsp arrowSingleLeft"></span>
            </a>
        </li>
        <li class="pager__page">
            <a href="#">1</a>
        </li>
        <li class="pager__page">
            <a href="#">2</a>
        </li>
        <li class="pager__page">
            <a href="#">3</a>
        </li>
        <li class="pager__page">
            <a href="#">4</a>
        </li>
        <li class="pager__page">
            <a href="#">5</a>
        </li>
        <li class="pager__page">
            <a href="#">6</a>
        </li>
        <li class="pager__page">
            <a href="#">7</a>
        </li>
        <li class="pager__page">
            <a href="#">8</a>
        </li>
        <li class="pager__page">
            <a href="#">...</a>
        </li>
        <li class="pager__page pager__lastPage is-current">
            <a href="#">12</a>
        </li>
    </ul>
</div>

Usage

ElementClassDescription
.pager .pager__page .is-current Visually labels the currently selected / active pager item.
.pager .has-textalign-right Moves the pager element to the right.

Advanced pager

  • Page 6 of 380
  • Items
<div class="pager pager--advanced">
    <ul>
        <li class="pager__page pager__firstPage">
            <a href="#">
                <span class="iconMdsp arrowSingleLeft"></span>
            </a>
        </li>
        <li class="pager__page">
            <div class="inputGroup">
                <input class="inputGroup__textInput" type="number" value="6" id="input-number25" />
            </div>
        </li>
        <li class="pager__page pager__lastPage">
            <a href="#">
                <span class="iconMdsp arrowSingleRight"></span>
            </a>
        </li>
        <li class="pager__page pager__pageCounter">
            Page 6 of 380
        </li>
        <li class="pager__page pager__itemPerPage">
            <div class="inputGroup">
                Items
                <div class="selectWrapper">
                    <select id="idol-select25" class="inputGroup__select">
                        <option value="15">15</option>
                        <option value="30">30</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
            </div>
        </li>
    </ul>
</div>

Advanced pager with border

  • Page 2 of 283
  • Items
<div class="pager pager--advanced pager--withBorder">
    <ul>
        <li class="pager__page pager__firstPage">
            <a href="#">
                <span class="iconMdsp arrowSingleLeft"></span>
            </a>
        </li>
        <li class="pager__page">
            <div class="inputGroup">
                <input class="inputGroup__textInput" type="number" value="6" id="input-number26" />
            </div>
        </li>
        <li class="pager__page pager__lastPage">
            <a href="#">
                <span class="iconMdsp arrowSingleRight"></span>
            </a>
        </li>
        <li class="pager__page pager__pageCounter">
            Page 2 of 283
        </li>
        <li class="pager__page pager__itemPerPage">
            <div class="inputGroup">
                Items
                <div class="selectWrapper">
                    <select id="idol-select27" class="inputGroup__select">
                        <option value="15">15</option>
                        <option value="30">30</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
            </div>
        </li>
    </ul>
</div>

Usage

ElementClassDescription
.pager .has-textalign-right Moves the pager element to the right.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top