Pagination

Two options to paginate a content: Full Pagination and More Pagination

Overview

Pagination refers to numbering pages in a document. This function is used for displaying a limited number of results on search engine, or showing a limited number of posts when viewing a forum thread or a wall. Also, pagination is used in some forms in web applications to divide and display returned data on multiple pages.
There are 2 pagination types, including:
Full pagination
More pagination

When to use?

If all data are displayed on one page at once, loading may become very slow. Pagination is a good solution that limits quantity of data displayed and also make easy to view and control. Using pagination is really necessary when a page or form has a large number of data to be displayed. Pagination is often selected when:
Content is too long to display at once.
Content needs to be displayed on first pages.

Full pagination

In the full mode, data are grouped by pages. Each page contains a number of items that are defined by the user's setting preferences or configured by administrators.

Template

Stateful page links

Links are customizable and work in a number of circumstances with the right class: .disabled for unclickable links and .active for current page.

Flexible alignment

Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

Markup

Status

Status Sample Description
Previous/next button (disabled) Previous/next button is disabled with light gradient background and icon when the active page is the first/last one.Tooltip: No tooltip.
Standard page selector Standard page selector buttons are enabled when they are not selected.Tooltip: No tooltip
Hover page Hover effect on a specific page button.
Current active page Current active button is disabled with dark gradient background when it is selected (being viewed).Tooltip: No tooltip
Previous/Next button (enabled) Previous/Next button is enabled when the active page is not the first/last one. Previous/Next button is to select the previous/next page of the current active page. Tooltip: Previous/ Next

Rules

FPR-01 No pagination in case of one-page content.
FPR-02 Pagination is put at the right corner.
FR-03 The minimum number of button is 4.
FPR04 The maximum number of button is 7.
FPR05 Same number of items per page.
FPR06 Same rules for displaying pagination buttons.

Items per page

The default number of items per page of each product should be displayed fully on the screen to avoid redundant blank spaces. The default number may be fixed with 10 or 20 items per page. However, this default number can be changed with the Page size option below.

Note:
Defining one maximum number of items per page should be based on characteristics of the content display.
The number of items per page will be loaded depending on the value of the Maximum selected page size.
The number of pagination buttons will be changed depending on the number of items per page.

More pagination

In the More mode, all data can be displayed in 1 page. However, to avoid overloading, only a certain number of items are loaded by default. If users want more data to be displayed, they can click the Show More... button or scroll down towards the page bottom.

Template

The Show More... button is displayed when more another items can be displayed. More 10 items will be loaded per Show More...click.



In case all content is loaded, the Show More... button is auto-hidden and the Go Up link may be displayed.

Status

Status Description
Show More The Show More... button displays at the page bottom in case the number of displayed items are greater than the current ones.
Go up The Go Up link displays at the page bottom if the Show More... button is clicked at least once and all items are loaded in page.

Rules

MPR-01 No pagination in case all content is loaded by default.
MPR-02 The Show More... button is put at the center bottom of a page.
MPR-03 The same number of items per Show More... click or scroll-down.
MPR-04 The Go Up link is displayed if users click the Show More... button or scroll down at least once.

Items per load

With the Show More... pagination, all items are loaded in one page. Each click or scroll-down shows more items.
The number of items per click on the Show More... button can be fixed in code or defined in Settings.
Selecting 10 or 20 items per click or scroll-down is ideal, depending on your item feature.