Custom Pagination Component In JavaScript – tui.pagination

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