PurePajinate

A pure javascript class for paginating through any number of DOM elements.
Inspired by Pajinate, a plugin for jQuery.

Options

Usage

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.

Browser Support

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.

License

GNU General Public License version 3 or later.
See License details