psdcoder / pagination-builder

Calculate pagination array for easier building of pagination markup.

pagination-builder

Pagination builder is the simple function that generates pagination array by passed current page and total pages. It performs all the logic for you and you just have to draw the result.

Installation

For install stable version:

npm install --save pagination-builder

This assumes you are using npm as your package manager.
You can use this function as CommonJS module. This module is what you get when you import paginationBuilder in a Webpack, Browserify, or a Node environment.

If you don’t use a module bundler, it’s also fine. The paginationBuilder npm package includes precompiled production and development UMD builds in the dist folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. For example, you can drop a UMD build as a <script>path to /dist/pagination-builder.js</script> on the page. The UMD build make paginationBuilder available as a window.paginationBuilder.default global variable.

The source code is written in ES2015 but we precompile both CommonJS and UMD builds to ES5 so they work in any modern browser. You don’t need to use Babel or a module bundler.

Example of usage

import paginationBuilder from 'pagination-builder';

const paginationStructure = paginationBuilder(5, 10);
const listItems = paginationStructure.map(item => {
    let className = 'pagination__item';

    if (item.isActive) {
        className += ' pagination__item_active';
    }

    if (item.isDisabled) {
        className += ' pagination__item_disabled';
    }

    const innerElement = item.isDisabled
        ? `<span class="pagination__element">${item.text}</span>`
        : `<a class="pagination__link" href="?page${item.page}">${item.text}</a>`;

    return `<li class="${className}">${innerElement}</li>`;
});

console.log(['<ul class="pagination">', ...listItems, '</ul>'].join(''));

Will print to console:

<ul class="pagination">
    <li class="pagination__item"><a class="pagination__link" href="?page4">Prev</a></li>
    <li class="pagination__item"><a class="pagination__link" href="?page1">1</a></li>
    <li class="pagination__item"><a class="pagination__link" href="?page2">2</a></li>
    <li class="pagination__item"><a class="pagination__link" href="?page3">3</a></li>
    <li class="pagination__item"><a class="pagination__link" href="?page4">4</a></li>
    <li class="pagination__item pagination__item_active"><a class="pagination__link" href="?page5">5</a></li>
    <li class="pagination__item"><a class="pagination__link" href="?page6">6</a></li>
    <li class="pagination__item"><a class="pagination__link" href="?page7">7</a></li>
    <li class="pagination__item pagination__item_disabled"><span class="pagination__element">...</span></li>
    <li class="pagination__item"><a class="pagination__link" href="?page10">10</a></li>
    <li class="pagination__item"><a class="pagination__link" href="?page6">Next</a></li>
</ul>

API

Module has one default exported function: paginationBuilder(currentPage, totalPages[, options={Object}])

Options object params

Param	Default value	Description
prevNextLinks	true	Generate items with prev and next text
dots	'...'	Generate dots between items, if false it won't generated
prevText	'Prev'	Text that will be used for previous item, if prevNextLinks is true
nextText	'Next'	Text that will be used for next item, if prevNextLinks is true
afterFirst	2	Count of items that will be returned after first page, before dots
beforeLast	2	Count of items that will be returned before last page, after dots
beforeCurrent	2	Count of items that will be returned before current page, after dots
afterCurrent	2	Count of items that will be returned after current page, before dots

Example

Result of call: paginationBuilder(10, 22, { afterCurrent: 3 }).map(item => item.text).join(' ');

Prev 1 2 3 ... 8 9 10 11 12 13 ... 20 21 22 Next
 ^    |---|   |---|  |--------|   |-----|     ^
 |      ^       ^        ^           ^        |
 |      |       |        |           |        |
 |      |       |   afterCurrent     |        |
 |      | beforeCurrent         beforeLast    |
 | afterFirst                                 |
 prevText                                 nextText