Poltoratchi-pagination-js-plugin NPM

Pagination-js-plugin

VanillaJS Pagination Plugin with custom handler

Demo

VanillaJS Pagination Plugin with custom handler

Install

npm install poltoratchi-pagination-js-plugin

Use

<ul id="pagination"></ul>

import Pagination from 'poltoratchi-pagination-js-plugin';


const paginationWrapper = document.querySelector('#pagination');
const pagination = new Pagination(paginationWrapper, { options });

Options

activeColor: string ( hex / rgb ) Color of active page button optional | default: 'red'.
activeClass: string (className without ".") Class of active page button optional | default: 'selected-page'.
elements: number Total elements data, from server required.
pageSize: number Page size required.
pagesShow: number Number of central pages optional | default: 5.
classes: {object} Classes for pagination elements optional | default: -
    classes: {
        mainParent: 'pagination-plugin', // class name of pagination wrapper
        centerParent: 'pagination-plugin__wrapper', // class name of centered pages wrapper
        page: 'pagination-plugin__wrapper-btn', // class name of page
        selectedSiblings: 'selected-siblings-pages', // class name of elements if activePage is first elements or last
        lastPage: 'pagination-lastPage', // class name of last page
        firstPage: 'pagination-firstPage', // class name of first page
    }
pageHandle: function Custom function for click the page buttons -
optional | default:
    function handlePage(pageNumber, lastPageNumber, event) {
        pagination.changePage(pageNumber)
    }

Methods

pagination.changePage(pageNumber) Change the page pageNumber: number
pagination.destroy() Destroy the pagination and remove elements;
pagination.init() Initialize the pagination (you can make this before destroy);
pagination.rebuild(options) Rebuild pagination with new options ( default | {} );