Pagination
Overview
Nearly every app uses pagination to limit how many items show on a page. For example, on a Blog category page there is pagination to limit how many posts are shown at one time on the page.
You can use the pagination data to create simple "Next" and "Previous" links or you can show the standard pagination navigation like what you see on Google search result pages.
Pagination Styles
There are 4 different pagination styles that you can use. This can usually be set under the General Settings page in the Settings part of an app.
All
Returns every page. This is useful for dropdown menu pagination controls with relatively few pages. In these cases, you want all pages available to the user at once.
Elastic
A Google-like scrolling style that expands and contracts as a user scrolls through the pages.
Jumping
As users scroll through, the page number advances to the end of a given range, then starts again at the beginning of the new range.
Sliding
A Yahoo!-like scrolling style that positions the current page number in the center of the page range, or as close as possible. This is the default style.
Pagination Tags
| Tag | Description |
|---|---|
| {{ pagination.current }} |
The page number of the pagination page currently being viewed. Type: Integer |
| {{ pagination.currentItemCount }} |
The number of items on the current page. Type: Integer |
| {{ pagination.first }} |
The first page number. Type: Integer |
| {{ pagination.firstItemNumber }} |
The absolute number of the first item on the current page. Type: Integer |
| {{ pagination.firstPageInRange }} |
The number of the first page in the range returned by the scrolling style. Type: Integer |
| {{ pagination.firstUrl }} |
The URL of the first page number. Type: Integer |
| {{ pagination.itemCountPerPage }} |
The number of items available to each page. Type: Integer |
| {{ pagination.last }} |
The last page number. Type: Integer |
| {{ pagination.lastItemNumber }} |
The absolute number of the last item on the current page. Type: Integer |
| {{ pagination.lastPageInRange }} |
The number of last page in the range returned by the scrolling style. Type: Integer |
| {{ pagination.lastUrl }} |
The URL of the last page. Type: String |
| {{ pagination.next }} |
The page number of the next page in the range. Type: Integer |
| {{ pagination.nextRangeUrl }} |
The URL for the next page range. Type: String This is only useful if the number of items to display in the pagination control (page range) are less than the total number of pages. For example: Best used with the Jumping pagination style. |
| {{ pagination.nextUrl }} |
The URL of the next page in the range. Type: String |
| {{ pagination.pageCount }} |
The total number of pages. Type: Integer |
| {{ pagination.pagesInRange }} |
The list of pages for the current range based on the pagination scrolling style. Type: Array |
| {{ pagination.previous }} | The page number of the previous page in the range. |
| {{ pagination.previousRangeUrl }} |
The URL for the previous page range. Type: String This is only useful if the number of items to display in the pagination control (page range) are less than the total number of pages. For example: |
| {{ pagination.previousUrl }} | The URL of the of the previous page in the range. |
| {{ pagination.totalItemCount }} |
The total number of items. Type: Integer |
| {{ pagination.viewAll }} |
Whether or not the pagination is showing all items. Type: Boolean |
| {{ pagination.viewAllUrl }} |
The URL to view all items on one page. Type: String |
{{ pagination.pagesInRange }} Details
Loop through the Pages In Range values to output individual page numbers.
Example:
{% for page in pagination.pagesInRange %}
{% if page.number != pagination.current %}
<a href="{{ page.url }}" title="Go to Page {{ page.number }}">{{ page.number }}</a>
{% else %}
<strong>{{ page.number }}</strong>
{% endif %}
{% endfor %}/loop}
| Tag | Description |
|---|---|
| {{ page.number }} |
The page number for the individual page. Type: Integer |
| {{ page.url }} |
The URL for the individual page. Type: Integer |