Skip to content

Instantly share code, notes, and snippets.

@socieboy
Forked from vinicius73/pagination.vue
Created December 5, 2015 20:25
Show Gist options
  • Save socieboy/dc362b37cd6e5fb4597e to your computer and use it in GitHub Desktop.
Save socieboy/dc362b37cd6e5fb4597e 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>
@socieboy
Copy link
Author

socieboy commented Dec 5, 2015

Is this component for Laravel right? if it is, it would be nice to recived the pagination object and then render it.

<paginator :data="pagination"></paginator>

then on the ready method fetch the values total, per_page, current_page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment