Pagination
Uses JavaScriptPagination is used to divide large amounts of content into separate pages and allows the user to navigate to the next or previous pages.
Overview
Pagination is commonly used for things like table listings, search results or directories. The need for pagination is influenced by the amount of data to be displayed and the aim is to not overwhelm users with information and to improve the loading performance of the system.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <nav id="overview" class="pagination" role="navigation" aria-label="Pagination Navigation">
<button class="arrow-start d-block d-sm-none disabled">
<i class="material-icons" aria-label="start"></i>
</button>
<button class="arrow-back disabled">
<i class="material-icons" aria-label="back"></i>
</button>
<ul>
<li class="active" aria-label="Go to page 1">
<a href="#">1</a>
</li>
<li aria-label="Go to page 2">
<a href="#">2</a>
</li>
<li aria-label="Go to page 3">
<a href="#">3</a>
</li>
<li aria-label="Go to page 4">
<a href="#">4</a>
</li>
<li aria-label="Go to page 5">
<a href="#">5</a>
</li>
<li aria-label="Go to page null">
<span>...</span>
</li>
<li aria-label="Go to page 10">
<a href="#">10</a>
</li>
</ul>
<span class="mobile">Page 1 of 10</span>
<button class="arrow-forward">
<i class="material-icons" aria-label="forward"></i>
</button>
<button class="arrow-end d-block d-sm-none">
<i class="material-icons" aria-label="end"></i>
</button>
</nav>
|
Responsive design
On smaller screens the page links are replaced with text showing the page information, still using arrows to go to next or previous page but with the option to go to the first or last page as well.
When to consider something else
For exploration of content, where users are browsing aimlessly for something interesting, infinite scroll is better suited than using pagination. Pagination is best when the user is trying to accomplish a goal, for instance trying to find a particular article from a list.
How to use Pagination
Number of pages
While the pagination component supports infinite amount of pages, it is difficult for the user to find what they are looking for if the number of pages are high. To mitigate this ux problem, consider supplementing the pagination with a search as well as more advanced filter functionality.
Items per page
10 items per page can be used as a general rule, but in reality it depends on your specific context. Consider the display size of each item, showing 10 items and leaving half the screen unused is not good practice.
Placement
Place pagination below the set of items it paginates through.
Do
Don't
Developer documentation
Link relations
Consider adding <link rel="…" href="…"> to the <head> element of your HTML page. These links are used to indicate the relationships between a sequence of pages to web browsers and search engines. Link relations to consider adding are first, last, next and prev.
Javascript methods
Our pagination component works without a script, so the styling is still working where JavaScript is prohibited. But where it is allowed, and where you do not want to spend time banging your head to figure out the algorithm, the Design Guide provides a reference implementation! dg.paginate(pages, currentActive). The script takes in two arguments; pages and currentActive, where pages is total pages and currentActive is the current active page.
The script returns the paginated pages, an array of objects with two properties, page and current. page shows an integer, and null when it should be replaced with an ellipsis. The current is a bool that indicates whether the page is active or not.
Example
1 2 3 4 5 6 7 8 9 10 11 12 | import { paginate } from "@src/scripts/main";
console.log(paginate(10, 5))
//expected output:
[ {page: 1, current: false},
{page: null, current: false},
{page: 4, current: false},
{page: 5, current: true},
{page: 6, current: false},
{page: null, current: false},
{page: 10, current: false} ]
|