Pagination

Basics

A <nav class="canon-pagination"> named "Pagination" around an <ol>: Previous, the pages as links with the current one marked aria-current="page", a .canon-pagination-gap where pages are left out, and Next. On the first or last page, the arrow with nowhere to go is a link without href (aria-disabled="true").

Words and ends

The arrows show icons only; data-display="label" on the pagination (or an arrow) adds their words. .canon-pagination-first and .canon-pagination-last (chevrons-left, chevrons-right) jump to the ends of a long list.

Compact

For narrow spaces: .canon-pagination-current ("Page 2 of 30") between the arrows instead of the pages.

Drawn from the page count

With data-pages and data-page, canon.js draws the list: the first and last pages, data-siblings pages on each side of the current one (1 by default), gaps, and always as many items, so the arrows don't move. data-ends adds First and Last. With data-href="?page={page}" the pages are links; without it they are buttons that fire canon-page and move. When the pages don't fit, fewer are shown, then "Page 2 of 30". Drag the frame's corner to narrow it.

With data-ends, First and Last as well.

Table footer

Before the list, a .canon-pagination-summary and a .canon-pagination-size (a Select of rows per page) send it to the far end. With data-total and data-per-page canon.js counts the pages, writes the summary ("1–10 of 300") and keeps the first row in view when the rows per page change. After the list, a .canon-pagination-jump form goes to a page.

Jump to page

Without canon.js, the jump form is a plain GET form: Enter sends ?page=12 to the page's address.

Load more

For feeds and search results: a .canon-load-more under the list with a status and a Button. A press fires canon-load-more and the button is busy until the app adds the rows and sets data-shown; at data-total the button goes. data-auto loads as the button scrolls near view (infinite scroll), keeping it as the way in for keyboards. Without canon.js, a link to the next page does the same.

Size

data-size on the pagination or a container: squares the button's size (32 / 40 / 48), text and icons to match.

Edge cases

Long page numbers widen their squares. A single page has nothing to move to. Right to left, the pages read from the right and the arrows point the other way.