Skip to content

Instantly share code, notes, and snippets.

@vinicius73
Created November 5, 2015 14:45
Show Gist options
  • Save vinicius73/c914c58d35c2291d0d04 to your computer and use it in GitHub Desktop.
Save vinicius73/c914c58d35c2291d0d04 to your computer and use it in GitHub Desktop.
VueJS Pagination directive
<template>
<ul class="pagination">
<li v-show="current_page != 1">
<a href="javascript:;"
aria-label="Previous"
v-on:click="previousPage()">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li v-for="page in total_pages"
v-bind:class="{'active': current_page == ($index + 1)}"
v-on:click="setPage($index + 1)">
<a href="javascript:;">{{ $index + 1 }}</a>
</li>
<li v-show="current_page < total_pages">
<a href="javascript:;" aria-label="Next" v-on:click="nextPage">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</template>
<script>
module.exports = {
data: function () {
return {
total_pages: 0
}
},
props: {
total: {
type: Number,
required: true
},
per_page: {
type: Number,
default: 15
},
current_page: {
type: Number,
required: true,
twoWay: true
}
},
ready: function () {
this.calcPages();
this.$watch(function(){
this.calcPages();
});
},
methods: {
calcPages: function() {
this.total_pages = Math.ceil((this.total / this.per_page), -1);
},
setPage: function(_page) {
if(_page > this.total_pages) {
this.current_page = this.total_pages;
} else if (_page < 1) {
this.current_page = 1;
} else {
this.current_page = _page;
}
this.$dispatch('pagination-page-change', this.current_page)
},
nextPage: function() {
this.setPage(this.current_page + 1);
},
previousPage: function() {
this.setPage(this.current_page - 1);
},
lastPage: function () {
this.setPage(this.total_pages);
},
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment