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

| Prop | Type | Default value | Available values | Description | | :---: | :---: | :---: | :---: | :---: | | container | string HTMLElement | #pagination-bar-container | - | Specify this to change the container. | | theme | string | material | - | Specify this to change the theme. | | background | boolean | false | - | Specify this to Add a background color to the pagination button. | | hideOnSinglePage | boolean | false | - | Hide when there is only one page. | | prevText | string | '' | - | Replace prev icon with custom text. | | nextText | string | '' | - | Replace next icon with custom text. | | jumperPrefixText | string | 'Go to' | - | Specify this to change the prefix text of the jumper control. | | jumperSuffixText | string | '' | - | Specify this to change the suffix text of the jumper control. | | totalPrefixText | string | 'Total' | - | Specify this to change the prefix text of the total control. | | totalSuffixText | string | '' | - | Specify this to change the suffix text of the total control. | | firstPageNumber | number | 1 | - | Specify this to change the minimum page number of pagination bar. | | pagerCount | number | 7 | - | Specify this to change the number of page number buttons that will collapse when the total number of pages exceeds this value. | | currentPage | number | 1 | - | Initialize current page number. | | pageSize | number | 10 | - | Initialize the number of displayed entries per page. | | disabled | boolean | false | - | Initialize the disabled status of pagination bar. | | pageSizes | number[] | [10,20,30,40,50,100] | - | Define options of sizes control. | | sizesOptionLabel | (size: number) => string | - | - | Customize the label content of sizes options. | | total | number | 0 | - | Initialize total number of entries. | | layout | string string[] | prev,pager,next | total prev pager next jumper sizes | Specify this to change the layout of controls. | | onCurrentPageChange | Function | - | - | The callback function when the current page changes, passed in the currentPage as a parameter. | | onPageSizeChange | Function | - | - | The callback function when the page size changes, passed in the current pageSize as a parameter. |

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.