https://github.com/sant123/vuejs-uib-pagination
Best and complete pagination plugin for Vue.js. Inspired in Angular Bootstrap Pagination.
https://github.com/sant123/vuejs-uib-pagination
uib-pagination vue vue-pagination vuejs-pagination vuejs-uib-pagination vuejs2
Last synced: 4 months ago
JSON representation
Best and complete pagination plugin for Vue.js. Inspired in Angular Bootstrap Pagination.
- Host: GitHub
- URL: https://github.com/sant123/vuejs-uib-pagination
- Owner: sant123
- License: mit
- Created: 2017-02-13T01:09:35.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-10-29T02:34:41.000Z (about 7 years ago)
- Last Synced: 2025-06-21T00:34:50.357Z (5 months ago)
- Topics: uib-pagination, vue, vue-pagination, vuejs-pagination, vuejs-uib-pagination, vuejs2
- Language: TypeScript
- Size: 97.7 KB
- Stars: 56
- Watchers: 2
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vuejs-uib-pagination - Best and complete pagination plugin for Vue.js. Inspired in Angular Bootstrap Pagination. (Components & Libraries / UI Utilities)
- awesome-vue-refactor - vuejs-uib-pagination
- awesome-vue-zh - vuejs-UIB-分页 - Vue.js的最佳和完整的分页插件. 受到Angular Bootstrap Pagination的启发. (UI实用程序 / 分页)
- awesome-vue - vuejs-uib-pagination ★45 - Best and complete pagination plugin for Vue.js. Inspired in Angular Bootstrap Pagination. (UI Utilities / Pagination)
- awesome-vue - vuejs-uib-pagination - Best and complete pagination plugin for Vue.js. Inspired in Angular Bootstrap Pagination. ` 📝 3 years ago` (UI Utilities [🔝](#readme))
- awesome-vue - vuejs-uib-pagination - Best and complete pagination plugin for Vue.js. Inspired in Angular Bootstrap Pagination. (UI Utilities / Pagination)
README
# vuejs-uib-pagination
Best and complete pagination plugin for Vue.js 2.0. Inspired in [Angular Bootstrap Pagination](https://angular-ui.github.io/bootstrap/#pagination).
## Not Using Bootstrap?
No problem! The plugin template is not 100% Bootstrap dependent, that is why you can build your own styles for your pagination!
## Demo
Click [here](https://plnkr.co/edit/hcfYWCTaQ7GnlO7AitGM?p=preview).
## Installation
```sh
$ npm install vuejs-uib-pagination
```
## Quick Start
Global:
```html
```
CommonJS:
```javascript
var Vue = require("vue");
var pagination = require("vuejs-uib-pagination");
Vue.use(pagination);
```
ES2015:
```javascript
import * as Vue from "vue";
import pagination from "vuejs-uib-pagination";
Vue.use(pagination);
```
## Use
HTML:
```html
```
Script:
```javascript
var app = new Vue({
el: "#app",
data: {
pagination: { }
}
});
```
## Settings
The settings are almost the same as Angular Bootstrap Pagination, there are only 3 differences:
* `v-model` is an object and has these keys:
* currentPage
* numPages (avoid [props mutation anti-patern](https://vuejs.org/v2/guide/migration.html#Prop-Mutation-deprecated))
* `page-label` does not accept expressions, it works with functions.
* `template-url` is not supported.
### boundary-links
(Default: false) - Whether to display First / Last buttons.
```html
```
### boundary-link-numbers
(Default: false) - Whether to always display the first and last page numbers. If max-size is smaller than the number of pages, then the first and last page numbers are still shown with ellipses in-between as necessary. NOTE: max-size refers to the center of the range. This option may add up to 2 more numbers on each side of the displayed range for the end value and what would be an ellipsis but is replaced by a number because it is sequential.
```html
```
### direction-links
(Default: true) - Whether to display Previous / Next buttons.
```html
```
### first-text
(Default: First) - Text for First button.
```html
```
### force-ellipses
(Default: false) - Also displays ellipses when rotate is true and max-size is smaller than the number of pages.
```html
```
### items-per-page
(Default: 10) - Maximum number of items per page. A value less than one indicates all items on one page.
```html
```
### last-text
(Default: Last) - Text for Last button.
```html
```
### max-size
(Default: null) - Limit number for pagination size.
```html
```
### next-text
(Default: Next) - Text for Next button.
```html
```
### change
This can be used to call a function whenever the page changes.
```html
```
### disabled
(Default: false) - Used to disable the pagination component.
```html
```
### v-model
(Required)
* pagination (Default: 1) - Current page number. First page is 1.
* numPages (Readonly) - Total number of pages to display.
```html
```
### page-label
(Default: identity) - Override the page label based on passing the current page indexes. Supports page number with a paramenter.
```html
```
### previous-text
(Default: Previous) - Text for Previous button.
```html
```
### rotate
(Default: true) - Whether to keep current page in the middle of the visible ones.
```html
```
### total-items
Total number of items in all pages.
```html
```
## Inspiration
Give people comming from Angular.js major facility to use pagination.
## License
[MIT](LICENSE)