A pure javascript class for paginating through any number of DOM elements.
Inspired by Pajinate, a plugin for jQuery.
Option | Type | Description |
---|---|---|
containerSelector |
String | Default: '.items' . The items' container selector. |
itemSelector |
String | Default: '.item' . The individual item's selector. |
navigationSelector |
String | Default: '.page_navigation' . The pagination container selector. |
itemsPerPage |
integer | Default: 10 . The number of items that will show at once. |
pageLinksToDisplay |
integer | Default: 10 . The number of page links to display at once. All other pages will be hidden and replaced with ... |
startPage |
integer | Default: 0 . The first page to show. To show page 3, the value will be 2 |
wrapAround |
Boolean | Default: false . Determine if the pages should loop or not. |
navLabelFirst |
String | Default: 'First' . The label for the first control. |
navLabelPrev |
String | Default: 'Prev' . The label for the previous control. |
navLabelNext |
String | Default: 'Next' . The label for the next control. |
navLabelLast |
String | Default: 'Last' . The label for the last control. |
navAriaLabelFirst |
String | Default: 'First' . The aria label for the first control. |
navAriaLabelPrev |
String | Default: 'Prev' . The aria label for the previous control. |
navAriaLabelNext |
String | Default: 'Next' . The aria label for the next control. |
navAriaLabelLast |
String | Default: 'Last' . The aria label for the last control. |
navOrder |
Array | Default: ["first", "prev", "num", "next", "last"] . The order of the controls. 'num' represents the page links. |
showFirstLast |
Boolean | Default: false . Determine if the first and last controls will show or not. |
showPrevNext |
Boolean | Default: true . Determine if the previous and next controls will show or not. |
hideOnSmall |
Boolean | Default: false . Determine if the pagination shows when the number of items is smaller than the number of items per page. |
defaultClass |
String | Default: '' . A class to apply to all control elements. |
activeClass |
String | Default: 'active' . A class to apply to the active page link. |
disabledClass |
String | Default: 'disabled' . A class to apply to disabled controls. |
onInit |
Function | Default: false. Callback to be run on initialization. |
onPageDisplayed |
Function | Default: false. Callback to be run once a page is displayed. |
Wrap your items (div
, a
, img
, span
, li
, ...) within a container element (div
, ul
, ...).
<div class="items">
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
</div>
<div class="page_navigation"></div>
Call the class once the DOM is ready.
document.addEventListener('DOMContentLoaded', function() {
var my_example = new purePajinate({ itemsPerPage: 2 });
});
The CSS class loaded
is added to the container once the pagination has finished initializing.
When using the Ecmascript 5 version, supports goes all the way back to Internet Explorer 10. I have used Babel to convert the code into Ecmascript 5 compatible code.
GNU General Public License version 3 or later.
See License details