🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A very small yet customizable Vue.js component used to generate a pagination control for long content.

Pagination

Documentation

vue-pagenav

Travis Codecov

a vue pagenav plugin.

(since v2.0.0 support vue 2 only, use 1.x for vue1+)

check the demo

http://html5beta.com/apps/vue-pagenav.html

get

bower install vue-pagenav  #for 1.0+ users, bower install vue-pagenav#1 #or npm install vue-pagenav  #for 1.0+ users, npm install vue-pagenav@1

use

reference it in html

<script src="vue.min.js"> <script src="vue-pagenav.min.js">

new way to change page, supported by vue 1.0+/2.0+

<div id="test">   <zpagenav :page="page" :page-size="pageSize" :total="total" :max-link="maxLink" :page-handler="pageHandler" :create-url="createUrl"><zpagenav> </div> 
new Vue({   el: '#test',   data: {     page: 1 //page     ,pageSize: 10 //pageSize,  default is 10     ,total: 509 //total item count     ,maxLink: 5 //how many links to show, must not less than 5,  default is 5   }   ,methods: {     pageHandler: function(page) {       //here you can do custom state update       this.page = page     }     ,createUrl: function(unit) {       return unit.page > 1?'#page=' + unit.page:'#'     }   } })

the vue 1.x way by event, for vue 1.x

<div id="test">   <zpagenav :page="page", :page-size="pageSize", :total="total", :max-link.sync="maxLink" :event-name="eventName" :create-url="createUrl"><zpagenav> </div> 
//commonjs way var Vue = require('vue') var zPagenav = require('vue-pagenav') Vue.use(zPagenav)  //or direct use if window.Vue exists //Vue.use(window.zPagenav)  new Vue({   el: '#test',   data: {     page: 1 //page     ,pageSize: 10 //pageSize,  default is 10     ,total: 509 //total item count     ,maxLink: 5 //how many links to show, must not less than 5,  default is 5      // page change event name, default is 'page-change',     // optional     // for different pagenav, should use different name     ,eventName: 'custom'   }   ,events: {     'custom': function(page) {       this.page = page       console.log(page)     }   } })

style it, just the same css from bootstrap4 pagination module

.sr-only {   position: absolute;   width: 1px;   height: 1px;   padding: 0;   margin: -1px;   overflow: hidden;   clip: rect(0, 0, 0, 0);   border: 0; }  .sr-only-focusable:active, .sr-only-focusable:focus {   position: static;   width: auto;   height: auto;   margin: 0;   overflow: visible;   clip: auto; } .m-r-1 {     margin-right: 1rem!important; } .pagination {   display: inline-block;   padding-left: 0;   margin-top: 1rem;   margin-bottom: 1rem;   border-radius: .25rem; }  .page-item {   display: inline; }  .page-item:first-child .page-link {   margin-left: 0;   border-top-left-radius: .25rem;   border-bottom-left-radius: .25rem; }  .page-item:last-child .page-link {   border-top-right-radius: .25rem;   border-bottom-right-radius: .25rem; }  .page-item.active .page-link, .page-item.active .page-link:focus, .page-item.active .page-link:hover {   z-index: 2;   color: #fff;   cursor: default;   background-color: #0275d8;   border-color: #0275d8; }  .page-item.disabled .page-link, .page-item.disabled .page-link:focus, .page-item.disabled .page-link:hover {   color: #818a91;   cursor: not-allowed;   background-color: #fff;   border-color: #ddd; }  .page-link {   position: relative;   float: left;   padding: .5rem .75rem;   margin-left: -1px;   line-height: 1.5;   color: #0275d8;   text-decoration: none;   background-color: #fff;   border: 1px solid #ddd; }  .page-link:focus, .page-link:hover {   color: #014c8c;   background-color: #eceeef;   border-color: #ddd; }  .pagination-lg .page-link {   padding: .75rem 1.5rem;   font-size: 1.25rem;   line-height: 1.333333; }  .pagination-lg .page-item:first-child .page-link {   border-top-left-radius: .3rem;   border-bottom-left-radius: .3rem; }  .pagination-lg .page-item:last-child .page-link {   border-top-right-radius: .3rem;   border-bottom-right-radius: .3rem; }  .pagination-sm .page-link {   padding: .275rem .75rem;   font-size: .875rem;   line-height: 1.5; }  .pagination-sm .page-item:first-child .page-link {   border-top-left-radius: .2rem;   border-bottom-left-radius: .2rem; }  .pagination-sm .page-item:last-child .page-link {   border-top-right-radius: .2rem;   border-bottom-right-radius: .2rem; }  .pager {   padding-left: 0;   margin-top: 1rem;   margin-bottom: 1rem;   text-align: center;   list-style: none; }  .pager::after {   display: table;   clear: both;   content: ""; }  .pager li {   display: inline; }  .pager li > a, .pager li > span {   display: inline-block;   padding: 5px 14px;   background-color: #fff;   border: 1px solid #ddd;   border-radius: 15px; }  .pager li > a:focus, .pager li > a:hover {   text-decoration: none;   background-color: #eceeef; }  .pager .disabled > a, .pager .disabled > a:focus, .pager .disabled > a:hover {   color: #818a91;   cursor: not-allowed;   background-color: #fff; }  .pager .disabled > span {   color: #818a91;   cursor: not-allowed;   background-color: #fff; }  .pager-next > a, .pager-next > span {   float: right; }  .pager-prev > a, .pager-prev > span {   float: left; }

customize

var zPagenav = {    default: {     page: 1 //page     ,pageSize: 10 //pageSize     ,total: 0 //total items count     ,prevHtml: '«' //prev button html     ,nextHtml: '»' //next button html     ,prevSrHtml: 'Previous' //prev button screen reader html     ,nextSrHtml: 'Next' //next button screen reader html     ,dotsHtml: '...' //sepration element html     ,template: //template 			`<nav class="zpagenav">` + 				`<span class="pagination page-link m-r-1">total:{{total}}</span>` + 				`<ul class="pagination">` + 					`<li track-by="$index" v-for="unit in units" :class="'page-item ' + unit.class" :disabled="unit.disabled">` + 						`<a @click.prevent="setPage(unit.page)" class="page-link" :href="setUrl(unit)" :aria-label="unit.ariaLabel">` + 							`<span v-if="unit.isPager" aria-hidden="true" v-html="unit.html"></span>` + 							`<span v-else v-html="unit.html"></span>` + 							`<span v-if="unit.isPager" class="sr-only" v-html="unit.srHtml"></span>` + 						`</a>` + 					`</li>` + 				`</ul>` + 			`</nav>`   }  }  //by modify zPagenav.default to customize the template or other params, like: zPagenav.default.nextHtml = 'next'

test & build & dev

git clone https://github.com/zxdong262/vue-pagenav.git cd vue-pagenav npm install npm run test  #build npm run build  #dev npm start

License

MIT


You May Also Like