vue-pagenav

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