PaginateJs

A micro plugin for adding quickly pagination to any kind of element.

Simply this lib enables you to create an paginatination with any kind of element. Really simple with nearly zero configuration.

Advantages

• ~3KB
• without jQuery
• easy-to-use

Usage

1. Require the lib

<script type="text/javascript" src="./dist/paginate.min.js"></script>

2. Create container regarding pagination

<!-- the container with the elements to be paginated (in this case a simple list)-->
<ul id="container">
    <li>Entry #1</li>
    <li>Entry #2</li>
    <li>Entry #3</li>
    <li>Entry #4</li>
    <li>Entry #5</li>
    <li>Entry #6</li>
</ul>

<!-- the container that contains the page links -->
<div id="pagination"></div>

3. Initialize plugin

paginateJs({
    container: document.getElementById('container'), // REQUIRED - the container with the elements that'll paginated as children
    pagination: document.getElementById('pagination'), // REQUIRED - the container holding the page links
    size: 3, // OPTIONAL (default=5) - how many elements on one page
    captions: // OPTIONAL - holds the captions for "special" buttons
    { 
        prev: '<', // OPTIONAL (default='<') - the previous button caption
        next: '>' // OPTIONAL (default='>') - the next button caption
    },
    prev: function (next_page_id) {}, // OPTIONAL - the callback that's triggered on previous change click
    next: function (next_page_id) {}, // OPTIONAL - the callback that's triggered on next change click
    change: function next_page_id) {}, // OPTIONAL - the callback that's triggered on page change (NOT prev OR next ONLY direct page change)
    page_link: function () // OPTIONAL - the link creation function to replace the original link creation to return element of your choice
    { 
        return document.createElement('button')
    },
    page: function () // OPTIONAL - the page creation function to replace the original page createion to return element of your choice
    {
        return document.createElement('section')
    }
});

4. Reload page see how the pagination is built. :)

INFO

Currently the plugin doesn't support reducing of the buttons, so EVERY page button that is created is visible. Possibly implemented in future version.