Paginator.js

this is vanilla javascript that provides simple customizable pagination.

Installation

1. Just Download Paginator.js from the Git Repository
2. add Code your project <script src="https://aierse.github.io/PaginatorJS/src/Paginator.js"></script>

Quick Start

Just you have to itemContainer and PageContainer

<div class="pageBody"></div>
<div class="pageFooter"></div>

Paginator constructor does auto initialize.

const source = [1, 2, 3, 4, 5];

const paginator = new Paginator({
	itemContainer: ".pageBody",
	pageContainer: ".pageFooter",
	data: source,
	callback: (target) => `<div>Explain ${target}</div>`,
});

Paginator controls By Code

paginator.page = 5; // then change itemContainer

Apply CSS

<< Button

.paginatorFirst {
	/* custom */
}

< Button

.paginatorPrev {
	/* custom */
}

> Button

.paginatorNext {
	/* custom */
}

>> Button

.paginatorLast {
	/* custom */
}

Number Button

.paginatorItem {
	/* custom */
}

/* Now Page */
.active {
	/* custom */
}

Sample

If you want all of sample code Click Here