Best and complete pagination plugin for Vue.js 2.0. Inspired in Angular Bootstrap Pagination.
No problem! The plugin template is not 100% Bootstrap dependent, that is why you can build your own styles for your pagination!
Click here.
$ npm install vuejs-uib-pagination
Global:
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vuejs-uib-pagination/dist/vuejs-uib-pagination.js"></script>
CommonJS:
var Vue = require("vue");
var pagination = require("vuejs-uib-pagination");
Vue.use(pagination);
ES2015:
import * as Vue from "vue";
import pagination from "vuejs-uib-pagination";
Vue.use(pagination);
HTML:
<div id="app">
<div is="uib-pagination" v-model="pagination" :total-items="22"></div>
<!-- or -->
<uib-pagination v-model="pagination" :total-items="22"></uib-pagination>
</div>
Script:
var app = new Vue({
el: "#app",
data: {
pagination: { }
}
});
The settings are almost the same as Angular Bootstrap Pagination, there are only 3 differences:
v-model
is an object and has these keys:
page-label
does not accept expressions, it works with functions.template-url
is not supported.(Default: false) - Whether to display First / Last buttons.
<div is="uib-pagination" v-model="pagination" :boundary-links="false"></div>
(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.
<div is="uib-pagination" v-model="pagination" :boundary-link-numbers="false"></div>
(Default: true) - Whether to display Previous / Next buttons.
<div is="uib-pagination" v-model="pagination" :direction-links="true"></div>
(Default: First) - Text for First button.
<div is="uib-pagination" v-model="pagination" first-text="First"></div>
(Default: false) - Also displays ellipses when rotate is true and max-size is smaller than the number of pages.
<div is="uib-pagination" v-model="pagination" :force-ellipses="false"></div>
(Default: 10) - Maximum number of items per page. A value less than one indicates all items on one page.
<div is="uib-pagination" v-model="pagination" :items-per-page="10"></div>
(Default: Last) - Text for Last button.
<div is="uib-pagination" v-model="pagination" last-text="Last"></div>
(Default: null) - Limit number for pagination size.
<div is="uib-pagination" v-model="pagination" :max-size="7"></div>
(Default: Next) - Text for Next button.
<div is="uib-pagination" v-model="pagination" next-text="Next"></div>
This can be used to call a function whenever the page changes.
<div is="uib-pagination" v-model="pagination" @change="someFunction"></div>
(Default: false) - Used to disable the pagination component.
<div is="uib-pagination" v-model="pagination" :disabled="false"></div>
(Required)
<div is="uib-pagination" v-model="pagination"></div>
(Default: identity) - Override the page label based on passing the current page indexes. Supports page number with a paramenter.
<div is="uib-pagination" v-model="pagination" :page-label="someFunction"></div>
(Default: Previous) - Text for Previous button.
<div is="uib-pagination" v-model="pagination" previous-text="Previous"></div>
(Default: true) - Whether to keep current page in the middle of the visible ones.
<div is="uib-pagination" v-model="pagination" :rotate="true"></div>
Total number of items in all pages.
<div is="uib-pagination" v-model="pagination" :total-items="72"></div>
Give people comming from Angular.js major facility to use pagination.
Author: sant123
Source Code: https://github.com/sant123/vuejs-uib-pagination
#vue #vuejs #javascript