Navigation
Pagination
Page numbers with Previous and Next. Long lists get “…” in the right places.
Buttons with an event
Page 5 of 12
HTML
<nav class="pw-pagination" data-pw-pagination data-total="240" data-per-page="20" data-page="5" id="demo-pages"></nav>
<p class="demo-out" id="demo-pages-out">Page 5 of 12</p>JavaScript
document.getElementById('demo-pages').addEventListener('pw:change', function (e) {
document.getElementById('demo-pages-out').textContent = 'Page ' + e.detail.page + ' of ' + e.detail.pages;
});Links
With data-href the numbers are normal links. {page} is replaced by the number.
HTML
<nav class="pw-pagination" data-pw-pagination data-pages="6" data-page="2" data-href="#page-{page}" aria-label="Blog pages"></nav>Options
Set them as attributes on the element.
| Attribute | Default | What it does |
|---|---|---|
data-total | 0 | Number of items. |
data-per-page | 10 | Items on one page. |
data-pages | Number of pages, when you know it. Used instead of total and per-page. | |
data-page | 1 | The current page. |
data-href | A link pattern with {page}. Without it you get buttons and the pw:change event. | |
data-siblings | 1 | How many numbers show on each side of the current page. |
Events
Listen with addEventListener. Details are in event.detail.
| Event | When |
|---|---|
pw:change | With page and pages. Call preventDefault() to stay on the page. |
From your script
var p = Partwise.get('#demo-pages', 'pagination');
p.page = 3;
p.update({ total: 600 });Good to know
- The current page has
aria-current="page". - After a click the focus stays on the current page number.
Files
Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/50-more.css, js/50-more.js.