Pagination molecule
Navigation of a large dataset by chunking records into smaller pages.
Example
<nav class="ks-Pagination">
<a href class="ks-Pagination-item">First</a>
<a href class="ks-Pagination-item">Previous</a>
<a href class="ks-Pagination-item ks-Pagination-item--active">1</a>
<a href class="ks-Pagination-item">2</a>
<a href class="ks-Pagination-item">3</a>
<a href class="ks-Pagination-item">4</a>
<a href class="ks-Pagination-item">5</a>
<a href class="ks-Pagination-item">Next</a>
<a href class="ks-Pagination-item">Last</a>
</nav>.ks-Pagination {
background-color: #fff;
display: inline-block;
border: 0.1em solid #ccc;
&-item {
display: inline-block;
padding: 0.25em;
&--active {
color: #666;
text-decoration: none;
}
&:hover {
background-color: #eef;
}
}
}Problem
There are too many matching records to fit on a single web page
Solution
Break the larger search results into multiple pages of the same size
Context
Large data sets may not fit well on a single web page. Pagination breaks up the full list of matching records into manageable smaller lists of equivalent size. When the full data set is not displayed on one page, provide navigation at the bottom of the table to move easily through the matching records, jumping to specific pages and the ends.
When to use
- If a large data sets does not fit easily onto a single web page.
- To provide an easy means of navigating a large list without scrolling.
Issues
- Suggest we use icons in the back.next.etc buttons, and links rather than buttons for the numbered buttons, rather than words, to reduce the visual weight of the pagination.