Author: | nhnent |
---|---|
Views Total: | 4,826 views |
Official Page: | Go to website |
Last Update: | June 19, 2021 |
License: | MIT |
Preview:

Description:
tui.pagination is a small pagination UI component that dynamically renders pagination links with custom events & template support.
How to use it:
Installation.
# NPM $ npm install tui-pagination --save
Import the tui.pagination as a module.
// ES 6 import {Pagination} from 'tui-pagination'; // CommonJS: const Pagination = require('tui-pagination');
Create a container to hold the pagination links.
<div id="tui-pagination-container"> </div>
Render a default pagination inside the container.
const container = document.getElementById('tui-pagination-container'); const myPagination = new Pagination(container, { // options here });
All default configuration options.
const myPagination = new Pagination(container, { // Total number of items totalItems: 10, // Items per page itemsPerPage: 10, // Visible pages visiblePages: 10, // Current page page: 1, // center aligned centerAlign: false, // default classes firstItemClassName: 'tui-first-child', lastItemClassName: 'tui-last-child', // enable usage statistics usageStatistics: true });
API methods.
// gets the current page myPagination.getCurrentPage(); // goes to page x myPagination.movePageTo(targetPage); // resets the pagination myPagination.reset(totalItems); // sets the number of items per page myPagination.gsetItemsPerPage(itemCount); // sets the total number of items myPagination.setTotalItems(itemCount);
Event handlers available.
// after move myPagination.on('afterMove', function(eventData) { var currentPage = eventData.page; console.log(currentPage); }); // before move move myPagination.on('beforeMove', function(eventData) { var currentPage = eventData.page; if (currentPage === 10) { return false; // return true; } });
Changelog:
v3.4.1 (06/19/2021)
- Enhancement