An ES6 class for pagination functionality and rendering.
This example shows how to create a pagination instance. To integrate pagination with application logic, simply bind functionality to instance events.
import Pagination from 'pagination-class'
let pagination = new Pagination('#pagination-container', 50, 1)
pagination.on('goto:post', () => {
// Application logic for navigation
})<html>
<head>
<title>Pagination class example</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Pagination class example</h1>
<div id="pagination-container"></div>
</body>
</html>Container to insert pagination elements into - can provide either an HTML node or a string to be used in document.querySelector().
Total number of pages to render.
Current page.
Pagination instance options.
listClass: Class added to<ul>elementsummaryClass: Class added to pagination summary container elementsummaryCurrentClass: Class added to the<span>element containing the current pagesummaryOfClass: Class added to the<span>element containing the 'of' text, defined in thesummaryOfTextoptionsummaryTotalClass: Class added to the<span>element containing the total number of pagesitemClass: Class added to page number elementsseparatorClass: Class added to separator elements, between truncated points in the listprevClass: Class added to previous elementnextClass: Class added to next elementactiveClass: Class added to active page elementdisabledClass: Class added to disabled elementsshowSummary: Enable summary displayshowPages: Enable pages displayshowPrevNext: Enable previous and next displaytruncateList: Enable truncated page list - iffalse, list will contain every pageadjacentNumbers: Number of pages to appear on either side of the current pageouterNumbers: Number of pages to appear on the outside of the truncated list - lists the first x pages and last x pages, depending where truncatedsummaryOfText: Text to display in the summary, between the current page and total pagesprevText: Text to display in the previous elementnextText: Text to display in the next elementseparatorText: Text to display in the page separator element
{
listClass: 'pagination-list',
summaryClass: 'pagination-summary',
summaryCurrentClass: 'pagination-summary-current',
summaryOfClass: 'pagination-summary-text',
summaryTotalClass: 'pagination-summary-total',
itemClass: 'pagination-item',
separatorClass: 'pagination-separator',
prevClass: 'pagination-prev',
nextClass: 'pagination-next',
activeClass: 'active',
disabledClass: 'disabled',
showSummary: true,
showPages: true,
showPrevNext: true,
truncateList: true,
adjacentNumbers: 6,
outerNumbers: 2,
summaryOfText: 'of',
prevText: 'Previous',
nextText: 'Next',
separatorText: '…'
}Public control methods to be accessed on an instance are as follows:
Go to page specified by page parameter.
Optionally, you can pass a direction parameter to determine if it is moving forwards or backwards - useful for integration with sliding animations.
Go to previous page - calls goTo.
Go to next page - calls goTo.
The class triggers the following events:
Triggered before a page element is clicked.
{
page: page // New page to set
}Triggered after a page element is clicked.
{
page: page // New page set
}Triggered before previous element is clicked.
{
page: page // Current page before being set
}Triggered after previous element is clicked.
{
page: page // Current page after being set
}Triggered before next element is clicked.
{
page: page // Current page before being set
}Triggered after next element is clicked.
{
page: page // Current page after being set
}Triggered before new page is set.
{
newPage: newPage, // New page to set
direction: direction // Navigation direction
}Triggered after new page is set.
{
newPage: newPage, // New page just set
previousPage: previousPage, // Previous page before being set
direction: direction // Navigation direction
}Triggered before navigating to previous page.
Triggered after navigating to previous page.
Triggered before navigating to next page.
Triggered after navigating to next page.