JavaScript HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
dist
src
test
.babelrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
bower.json
package.json
webpack.config.js

README.md

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