vue-bootstrap-paginator
A Vue.js 2 component for simple pagination with Bootstrap layout.
npm i --save vue-bootstrap-paginatorNarrow template
Full template
Usage
The component has the following properties:
- page: current page
- pages: total number of pages
- width: maximum number of pages after which compact mode will be used
- pageFn: a function to generate href attribute for a page, e.g.,
{ return `./`}The component will emit change event with new page number when a user changes the page.
You can require the component in Vue components:
<template> <div class="parent-component"> <pagination :page="page" :pages="totalPages" :width="20" @change="onPageChange" :pageFn="pageFn"></pagination> </div></template><script> const Pagination = require('vue-bootstrap-paginator') module.exports = { data: () => ({ totalPages: 15, }), components: { Pagination }, methods: { onPageChange: function (page) { console.log('New page: %s', page) this.$router.push(this.pageFn(page)) }, pageFn: function (page) { return `./${page}` }, handleKeyUp: function (event) { if (event.keyCode === 39 && this.page < this.totalPages) { this.$router.push(this.pageFn(this.page + 1)) } if (event.keyCode === 37 && this.page > 1) { this.$router.push(this.pageFn(this.page - 1)) } }, }, computed: { page: function () { // when route param changes, change the page return Number(this.$route.params.page) || 1 }, }, created: function () { window.addEventListener('keyup', this.handleKeyUp) }, beforeDestroy: function () { window.removeEventListener('keyup', this.handleKeyUp) }, }</script>Or you can register pagination as a global component:
const Vue = const Pagination = VueGenerated HTML for full template
« 1 2 3 4 5 6 7 » Generated HTML for narrow template
« 1 … 4 5 6 7 » Testing
Tested with Karma, PhantomJS, Jasmine & Jasmine-Jquery
npm t