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
$ npm install vuejs-uib-pagination
Quick Start
Global:
CommonJS:
var Vue = ;var pagination = ; Vue;
ES2015:
;; Vue;
Use
HTML:
<!-- or -->
Script:
var app = 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.
boundary-links
(Default: false) - Whether to display First / Last buttons.
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.
direction-links
(Default: true) - Whether to display Previous / Next buttons.
first-text
(Default: First) - Text for First button.
force-ellipses
(Default: false) - Also displays ellipses when rotate is true and max-size is smaller than the number of pages.
items-per-page
(Default: 10) - Maximum number of items per page. A value less than one indicates all items on one page.
last-text
(Default: Last) - Text for Last button.
max-size
(Default: null) - Limit number for pagination size.
next-text
(Default: Next) - Text for Next button.
change
This can be used to call a function whenever the page changes.
disabled
(Default: false) - Used to disable the pagination component.
v-model
(Required)
- pagination (Default: 1) - Current page number. First page is 1.
- numPages (Readonly) - Total number of pages to display.
page-label
(Default: identity) - Override the page label based on passing the current page indexes. Supports page number with a paramenter.
previous-text
(Default: Previous) - Text for Previous button.
rotate
(Default: true) - Whether to keep current page in the middle of the visible ones.
total-items
Total number of items in all pages.
Inspiration
Give people comming from Angular.js major facility to use pagination.