https://github.com/paginationbar/paginationbar
A modern pagination bar library for web app.
https://github.com/paginationbar/paginationbar
pagination pagination-bar pagination-library paginator web
Last synced: 6 months ago
JSON representation
A modern pagination bar library for web app.
- Host: GitHub
- URL: https://github.com/paginationbar/paginationbar
- Owner: paginationbar
- License: mit
- Created: 2023-07-12T01:16:58.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-02T06:04:01.000Z (almost 2 years ago)
- Last Synced: 2025-03-29T02:35:32.082Z (6 months ago)
- Topics: pagination, pagination-bar, pagination-library, paginator, web
- Language: TypeScript
- Homepage: https://paginationbar.github.io/paginationbar/
- Size: 465 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# paginationbar
A modern pagination bar library for web app.
- [Release Notes](./CHANGELOG.md).
- [Example](https://paginationbar.github.io/paginationbar/).
# Features
- Built-in themes(material, element) design and more.
- Does not depend on any **third-party** library.
- Support **Typescript**.
# Installation
```bash
# pnpm
$ pnpm add paginationbar
# yarn
$ yarn add paginationbar
# npm
$ npm i paginationbar
```
# Usage
1. Import the style for themes.
```ts
// 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.
```html
```
3. Create a pagination bar instance.
```ts
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.
```ts
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.
```ts
paginationBar.setPageSize(20)
```
### setTotal
You can use this to change `total` after pagination bar initialization.
```ts
paginationBar.setTotal(500)
```
### disabled
Pagination bar can be manually deactivated using the `disabled()` method.
```ts
paginationBar.disabled(true) // deactivated
paginationBar.disabled(false) // activated
```
### destory
Destroys the pagination bar instance. For example, event listeners and so on.
```ts
paginationBar.destory()
```
### render
Manually re-render.
```ts
paginationBar.render()
```