Pagination¶

Usage¶

When to use¶

Generally, pagination is used if there are more than 25 items displayed in one view. The default number displayed will vary depending on the context.

When pagination may not help¶

Pagination should not be shown if only one page is available.

Alternative¶

From an UX point of view an alternative and better approach is called "Load More" pagination. When users scroll down to the bottom of the results page, they can consciously decide whether they want to see more results or not. If they want to continue browsing, they simply need to click on the button “Load More”. New results will either be appended under the current page or the whole page will be refreshed with new results.

Design¶

Elements¶

1. Navigation arrows, 2. Current page, 3. "More" indicator

Number of Pages¶

A maximum of 7 pages or items can be displayed.

When the total number of pages exceeds 7, then the remaining pages will be truncated. The navigation arrows should always be displayed.

Placement of pagination component¶

Pagination should be placed at the bottom right of the table.

Code¶

Pagination - provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Usage¶

import { SiPaginationComponent } from '@siemens/element-ng/pagination';

@Component({
  imports: [SiPaginationComponent, ...]
})