Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matfish2/vue-pagination-2
Vue.js 2 pagination component
https://github.com/matfish2/vue-pagination-2
pagination vue
Last synced: 4 months ago
JSON representation
Vue.js 2 pagination component
- Host: GitHub
- URL: https://github.com/matfish2/vue-pagination-2
- Owner: matfish2
- License: mit
- Archived: true
- Created: 2016-08-27T15:54:22.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-11-26T06:55:43.000Z (about 3 years ago)
- Last Synced: 2024-09-23T04:32:22.320Z (4 months ago)
- Topics: pagination, vue
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/vue-pagination-2
- Size: 1.14 MB
- Stars: 186
- Watchers: 5
- Forks: 66
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-vue - vue-pagination-2 - 简单通用的分页组件 (实用库)
- awesome-github-vue - vue-pagination-2 - 简单通用的分页组件 (实用库)
- awesome - vue-pagination-2 - 简单通用的分页组件 (实用库)
- awesome-vue - vue-pagination-2 - pagination-2?style=social) - 简单通用的分页组件 (实用库)
README
# Vue Pagination 2
Using Vue 3? Check out the [new component](https://www.npmjs.com/package/v-pagination-3)
-------
[Click here](https://jsfiddle.net/matfish2/c9wp2k63) to see it in action.
Simple, generic and non-intrusive pagination component for Vue.js version 2.
- [Dependencies](#dependencies)
- [Installation](#installation)
- [NPM](#npm)
- [Script tag](#script-tag)
- [Usage](#usage)
- [Custom Event](#custom-event)
- [Programmatic Manipulation](#programmatic-manipulation)
- [Computed Properties](#computed-properties)
- [Custom Template](#custom-template)
# Dependencies
* Vue.js (>=2.0.0 && <3.0.0). Required.
* CSS: Bootstrap 3 or Bootstrap 4 or Bulma.
# Installation
## NPM
npm install vue-pagination-2
import the script:
import Pagination from 'vue-pagination-2';
## Script tag
Grab the minified version under `dist/vue-pagination-2.min.js`.
It will export a global `Pagination` variable.
# Usage
### Register the component globally or locally:
```js
Vue.component('pagination', Pagination);
```
OR
```js
...
components: {
Pagination
}
...
```
HTML/JS:
```js
{
data() {
return {
page: 1
}
}
}
```
```vue
```
props:
* `records` `number` `required` number of records
* `per-page` `number` `optional` records per page. Default: `25`
* `v-model` `number` `required` Reference to the current page. Can be updated via the UI or programmatically
* `options` `object` `optional`:
* `chunk` `number` max pages per chunk. Default: `10`
* `chunksNavigation` `string` Which method to use when navigating outside chunks boundries. Default: `fixed`. Options are:
* `scroll` - the range of pages presented will incrementally change when navigating to a page outside the chunk (e.g 1-10 will become 2-11 once the user presses the next arrow to move to page 11).
* `fixed` - navigation will occur between fixed chunks (e.g 1-10, 11-20, 21-30 etc.). Double arrows will be added to allow navigation to the beginning of the previous or next chunk.
* `theme` `string` CSS theme used for styling. Supported: `bootstrap3`, `bootstrap4`,`bulma`. Default: `bootstrap3`.
* `format` `boolean` Format numbers using a separating comma. Default: `true`
* `edgeNavigation` Show links to first and last pages. Default: `false`
* `template` Pass your own [custom template](#custom-template)
* `texts` `object` `optional`
* `count` total records text. It can consist of up to 3 parts, divided by `|`.
* First part: used when there are multiple pages
* Second part: used when there is only one page
* Third part: used when there is only one record.
Default: `Showing {from} to {to} of {count} records|{count} records|One record`
* `first` First page text. Default: `First`
* `last` last page text. Default: `Last`
Note: if you want to display the page number rather than the records range, use `{page}` and `{pages}` as a placeholders.
E.g: `Showing page {page} out of {pages}`
## Custom Event
The model you bound to the component will be automatically updated.
In addition, when a page is selected a custom `paginate` event will be dispatched.
Listen to it on the component and run your callback
## Programmatic Manipulation
The simplest way to programmatically manipulate the page is to directly update your bound model.
In addition to that you can call the following methods using a `ref` on you component:
* `setPage(page)`
* `next()`
* `prev()`
* `nextChunk()`
* `prevChunk()`
All methods return `true` if the page is legal and was thus set, or `false` otherwise.
## Computed Properties
* `totalPages`
* `totalChunks`
* `currentChunk`
## Custom Template
You can easily build your own template by copying `src/Pagination.vue` to your project as a starting point and modifying the contents to your needs.
Then notify the component of your custom template by passing it to the `template` option.
```js
import MyPagination from './MyPagination'
...
{
options: {
template: MyPagination
}
}
```