{"id":23401034,"url":"https://github.com/paginationbar/paginationbar","last_synced_at":"2026-04-26T23:31:13.592Z","repository":{"id":180557551,"uuid":"665329437","full_name":"paginationbar/paginationbar","owner":"paginationbar","description":"A modern pagination bar library for web app.","archived":false,"fork":false,"pushed_at":"2024-01-02T06:04:01.000Z","size":476,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-19T10:58:26.702Z","etag":null,"topics":["pagination","pagination-bar","pagination-library","paginator","web"],"latest_commit_sha":null,"homepage":"https://paginationbar.github.io/paginationbar/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paginationbar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-12T01:16:58.000Z","updated_at":"2024-01-02T06:04:04.000Z","dependencies_parsed_at":"2024-10-29T19:54:15.240Z","dependency_job_id":null,"html_url":"https://github.com/paginationbar/paginationbar","commit_stats":{"total_commits":75,"total_committers":2,"mean_commits":37.5,"dds":"0.026666666666666616","last_synced_commit":"c3ff1d8eeed72c6e44b029a9d748cb3dff714f6b"},"previous_names":["paginationbar/paginationbar"],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/paginationbar/paginationbar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paginationbar%2Fpaginationbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paginationbar%2Fpaginationbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paginationbar%2Fpaginationbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paginationbar%2Fpaginationbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paginationbar","download_url":"https://codeload.github.com/paginationbar/paginationbar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paginationbar%2Fpaginationbar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32317162,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"ssl_error","status_checked_at":"2026-04-26T23:26:25.802Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pagination","pagination-bar","pagination-library","paginator","web"],"created_at":"2024-12-22T11:14:08.167Z","updated_at":"2026-04-26T23:31:13.575Z","avatar_url":"https://github.com/paginationbar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.org/package/paginationbar\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/paginationbar.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmcharts.com/compare/paginationbar?minimal=true\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/paginationbar.svg\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\n# paginationbar\n\nA modern pagination bar library for web app.\n\n- [Release Notes](./CHANGELOG.md).\n- [Example](https://paginationbar.github.io/paginationbar/).\n\n# Features\n\n- Built-in themes(material, element) design and more.\n- Does not depend on any **third-party** library.\n- Support **Typescript**.\n\n# Installation\n\n```bash\n# pnpm\n$ pnpm add paginationbar\n\n# yarn\n$ yarn add paginationbar\n\n# npm\n$ npm i paginationbar\n```\n\n# Usage\n\n1. Import the style for themes.\n\n```ts\n// Include all themes (Not recommended)\nimport 'paginationbar/lib/style.css'\n\n// Alternatively, you can import only a certain theme style (Recommended).\n// material theme\nimport 'paginationbar/lib/themes/material/index.css'\n// element theme\nimport 'paginationbar/lib/themes/element/index.css'\n```\n\n2. Define a container.\n\n```html\n\u003cdiv id=\"pagination-bar-container\"\u003e\u003c/div\u003e\n```\n\n3. Create a pagination bar instance.\n\n```ts\nimport { createPaginationBar } from 'paginationbar'\n\nconst paginationBar = createPaginationBar({\n  container: '#pagination-bar-container'\n  // Some options ...\n})\n```\n\n# Options\n| Prop | Type | Default value | Available values | Description |\n| :---: | :---: | :---: | :---: | :---: |\n| `container` | `string` \u003cbr /\u003e `HTMLElement` |  `#pagination-bar-container` | - | Specify this to change the container. |\n| `theme` | `string` |  `material` | - | Specify this to change the theme. |\n| `background` | `boolean` |  `false` | - | Specify this to Add a background color to the pagination button. |\n| `hideOnSinglePage` | `boolean` |  `false` | - | Hide when there is only one page. |\n| `prevText` | `string` |  `''` | - | Replace **prev icon** with custom text. |\n| `nextText` | `string` |  `''` | - | Replace **next icon** with custom text. |\n| `jumperPrefixText` | `string` |  `'Go to'` | - | Specify this to change the prefix text of the **jumper control**. |\n| `jumperSuffixText` | `string` |  `''` | - | Specify this to change the suffix text of the **jumper control**. |\n| `totalPrefixText` | `string` |  `'Total'` | - | Specify this to change the prefix text of the **total control**. |\n| `totalSuffixText` | `string` |  `''` | - | Specify this to change the suffix text of the **total control**. |\n| `firstPageNumber` | `number` |  `1` | - | Specify this to change the minimum page number of pagination bar. |\n| `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. |\n| `currentPage` | `number` |  `1` | - | Initialize current page number. |\n| `pageSize` | `number` |  `10` | - | Initialize the number of displayed entries per page. |\n| `disabled` | `boolean` |  `false` | - | Initialize the **disabled status** of pagination bar. |\n| `pageSizes` | `number[]` |  `[10,20,30,40,50,100]` | - | Define options of **sizes control**. |\n| `sizesOptionLabel` | `(size: number) =\u003e string` | - | - | Customize the label content of sizes options. |\n| `total` | `number` |  `0` | - | Initialize total number of entries. |\n| `layout` | `string` \u003cbr /\u003e `string[]` |  `prev,pager,next` | `total` \u003cbr /\u003e `prev` \u003cbr/\u003e `pager` \u003cbr /\u003e `next` \u003cbr /\u003e `jumper` \u003cbr/\u003e `sizes` | Specify this to change the layout of controls. |\n| `onCurrentPageChange` | `Function` | - | - | The **callback function** when the **current page** changes, passed in the `currentPage` as a parameter. |\n| `onPageSizeChange` | `Function` | - | - | The **callback function** when the **page size** changes, passed in the current `pageSize` as a parameter. |\n\n# APIs\n## Instance methods\n### setCurrentPage\n\nYou can use this to change `currentPage` after pagination bar initialization. and it will return a safty page number.\n\n```ts\npaginationBar.setCurrentPage(2)\n```\n\n### setPageSize\n\nYou can use this to change `pageSize` after pagination bar initialization. and it will also return a safty page size number.\n\n```ts\npaginationBar.setPageSize(20)\n```\n\n### setTotal\n\nYou can use this to change `total` after pagination bar initialization. \n\n```ts\npaginationBar.setTotal(500)\n```\n\n### disabled\n\nPagination bar can be manually deactivated using the `disabled()` method. \n\n```ts\npaginationBar.disabled(true) // deactivated\npaginationBar.disabled(false) // activated\n```\n\n### destory\n\nDestroys the pagination bar instance. For example, event listeners and so on.\n\n```ts\npaginationBar.destory()\n```\n### render\n\nManually re-render.\n\n```ts\npaginationBar.render()\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaginationbar%2Fpaginationbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaginationbar%2Fpaginationbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaginationbar%2Fpaginationbar/lists"}