vuejs-uib-pagination

Best and complete pagination plugin for Vue.js 2.0. Inspired in Angular 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.

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)
* page-label does not accept expressions, it works with functions.
* template-url is not supported.

$3

(Default: false) - Whether to display First / Last buttons.

`html



`

$3

(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



`

$3

(Default: true) - Whether to display Previous / Next buttons.

`html



`

$3

(Default: First) - Text for First button.

`html



`

$3

(Default: false) - Also displays ellipses when rotate is true and max-size is smaller than the number of pages.

`html



`

$3

(Default: 10) - Maximum number of items per page. A value less than one indicates all items on one page.

`html



`

$3

(Default: Last) - Text for Last button.

`html



`

$3

(Default: null) - Limit number for pagination size.

`html



`

$3

(Default: Next) - Text for Next button.

`html



`

$3

This can be used to call a function whenever the page changes.

`html



`

$3

(Default: false) - Used to disable the pagination component.

`html



`

$3

(Required)
* pagination (Default: 1) - Current page number. First page is 1.
* numPages (Readonly) - Total number of pages to display.

`html



`

$3

(Default: identity) - Override the page label based on passing the current page indexes. Supports page number with a paramenter.

`html



`

$3

(Default: Previous) - Text for Previous button.

`html



`

$3

(Default: true) - Whether to keep current page in the middle of the visible ones.

`html



`

$3

Total number of items in all pages.

`html



``

Inspiration

Give people comming from Angular.js major facility to use pagination.

License

MIT