paginationbar v1.14.0

paginationbar

A modern pagination bar library for web app. See example here.

Features

• Built-in themes(material, element) design and more.
• Does not depend on any third-party library.
• Support Typescript.

Installation

# pnpm
$ pnpm add paginationbar

# yarn
$ yarn add paginationbar

# npm
$ npm i paginationbar

Usage

1. Import the style for themes.

// Include all themes (Not recommended)
import 'paginationbar/lib/style.css'

// Alternatively, you can import only a certain theme style (Recommended).
// material theme
import 'paginationbar/lib/themes/material/index.css'
// element theme
import 'paginationbar/lib/themes/element/index.css'

2. Define a container.

<div id="pagination-bar-container"></div>

3. Create a pagination bar instance.

import { createPaginationBar } from 'paginationbar'

const paginationBar = createPaginationBar({
  container: '#pagination-bar-container'
  // Some options ...
})

Options

APIs

Instance methods

setCurrentPage

You can use this to change currentPage after pagination bar initialization. and it will return a safty page number.

paginationBar.setCurrentPage(2)

setPageSize

You can use this to change pageSize after pagination bar initialization. and it will also return a safty page size number.

paginationBar.setPageSize(20)

setTotal

You can use this to change total after pagination bar initialization.

paginationBar.setTotal(500)

disabled

Pagination bar can be manually deactivated using the disabled() method.

paginationBar.disabled(true) // deactivated
paginationBar.disabled(false) // activated

destory

Destroys the pagination bar instance. For example, event listeners and so on.

paginationBar.destory()

render

Manually re-render.

paginationBar.render()

CHANGE LOGS

See CHANGE LOG.