Skip to main content

Pagination

Installation#

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN#

<script src="https://unpkg.com/@pearson-ux/pagination"></script>

NPM#

npm i @pearson-ux/pagination --save

Demo#

Standard#

<pearson-pagination lastpage="10" ellipsisat="5"></pearson-pagination>

Compact#

<pearson-pagination compact lastpage="10"> </pearson-pagination>

Structure#

To add pagination, just add the markup in your app where you want it displayed.

API#

Required#

All these attributes are required.

AttributeTypeDefaultDescription
lastpageStringunsetThe last page you want pagination to end with

Optional#

All these attributes are optional.

AttributeTypeDefaultDescription
ellipsisatStringunsetDenotes the placement of the ellipsis (does not apply for compact mode) If the number provided does not meet the minimum requirements, it will default to best position available.
compactBoolunsetSets the pagination to compact mode

Events#

The pearson-pagination component emits three different events:

EventDescription
nextPageWill fire when the user interacts with the next page button
prevPageWill fire when the user interacts with the previous page button
newPageWill fire when the user interacts with single page number
const pagination = document.querySelector('pearson-pagination');
pagination.addEventListener('nextPage', () => {
// Do something when the next page button is clicked
});
pagination.addEventListener('prevPage', () => {
// Do something when the prev page button is clicked
});
pagination.addEventListener('newPage', () => {
// Do something when a single page number is clicked
});

HTML Markup#

Do you want to use your own JS to make the pagination function? No problem, use the markup below along with CSS to build pagination with your own JS.

Important note: You can follow the UXF guidelines to view the suggested functionality of the modal window.

Here are some basic practices to make sure the pagination you build is accessible.

Standard Markup#

<nav data-id="standardPagination" aria-label="pagination" class="gr-pagination" data-type="standard" data-pages-total="10" data-max-buttons="5" data-active-page="1" data-label="page" data-label-plural="pages">
<button class="gr-btn icon-btn-18" aria-label="Previous page">
<span>
<svg focusable="false" class="icon-18" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#previous-18"></use>
</svg>
</span>
</button>
<a href="#" aria-current="page"><span>1</span></a>
<a href="#"><span>2</span></a>
<a href="#"><span>3</span></a>
<a href="#"><span>4</span></a>
<a href="#"><span>5</span></a>
<a href="#" class="ellipsis" disabled="">...</a>
<a href="#"><span>100</span></a>
<button class="gr-btn icon-btn-18" aria-label="Next page">
<span>
<svg focusable="false" class="icon-18" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#next-18"></use>
</svg>
</span>
</button>
</nav>

Compact Markup#

<nav data-id="compactPagination" aria-label="pagination" class="gr-pagination" data-pages-total="10" data-type="compact" data-active-page="1" data-label="page" data-label-plural="pages">
<button class="gr-btn icon-btn-18" aria-label="Previous page">
<span>
<svg focusable="false" class="icon-18" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#previous-18"></use>
</svg>
</span>
</button>
<span class="compact-text">Page <span class="current-page">1-5</span> of <span class="total-pages">20</span>
</span>
<button class="gr-btn icon-btn-18" aria-label="Next page">
<span>
<svg focusable="false" class="icon-18" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#next-18"></use>
</svg>
</span>
</button>
</nav>