Overview of the Pager Component | Progress Design System

A Pager is a user interface (UI) element that divides a large amount of data into multiple pages and navigates the users through them. Pagers are usually used in data tables, search results, and directories. They reduce the cognitive load, decrease the loading time, and optimize the screen space by displaying the content in small chunks.

The Telerik and Kendo UI Pager provides consistent styling. It wraps buttons, dropdown or an input, and pager info that indicates the number of items shown on the page.

Live Demo

Appearance

Pagers provide built-in styling options that grant visually appealing and flexible rendering experience.

Apart from the default vision of the Telerik and Kendo UI Pager, the component supports alternative styling options which enable you to configure the individual aspects of its appearance.

States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI Pager can acquire the following states which you can set by using the following classes:

A Pager in its normal state allows interaction with the elements within it.
k-disabled—The disabled Pager does not allow interaction with any elements within it as they are disabled, too.

Anatomy

The anatomy of the Pager summarizes the elements of the component.

Depending on the elements they display, the Telerik and Kendo UI Pagers can be any of the following types:

numeric;Renders buttons with numbers.
input—Renders a NumericTextBox for entering the page number.

The available types of the Telerik and Kendo UI Pager component showing a numeric pager and an input pager.

Numeric
Input

The next image shows the anatomy of a Pager and includes the following elements:

Container
Previous buttons: navigate to the previous pages
Numeric buttons: display the available pages (or a part of them)
Truncation: indicates additional pages that cannon be displayed with numeric buttons
Next buttons: navigate to the next pages
Page size option: allows the user to set the number of items on the page
Info: describes the range of items displayed up to the total

Size

The Pager provides the size configuration option that enables you to control how big or small the rendered Pager will be. Pagers also provide options for size customization.

size provides the following available options:

small—Renders a small Pager, used along with small components in UI designs where the available space is limited.

The small Telerik and Kendo UI Pager wraps small-sized components and applies a $kendo-spacing, 1 spacing value for their paddings.
medium (default)—Renders a medium Pager.

The medium Telerik and Kendo UI Pager wraps medium-sized components and applies a $kendo-spacing, 2 spacing value for their paddings.
large—Renders a large Pager which is used with adaptive components and in mobile devices.

The large Telerik and Kendo UI Pagers achieve the recommended touch area dimensions by wrapping large-sized components and applying a $kendo-spacing, 2.5 spacing value for their paddings.
none—Does not set a size and allows you to add your own, custom value.