|
|
<style>
|
|
|
.prev,.next{cursor: pointer}
|
|
|
</style>
|
|
|
|
|
|
<template>
|
|
|
<div class="pagination-container">
|
|
|
<template v-if="pages > 0">
|
|
|
<nav>
|
|
|
<div>
|
|
|
<ul class="pagination light-theme simple-pagination">
|
|
|
<li v-bind:class="{'disabled':currentPage<2}" @click="prev">
|
|
|
<li class="prev" v-bind:class="{'disabled':currentPage<2}" @click="prev">
|
|
|
<span class="current prev">Prev</span>
|
|
|
</li>
|
|
|
<li v-if="showFirst" @click="nav('1')">
|
...
|
...
|
@@ -19,9 +23,8 @@ |
|
|
<li v-if="showLast" @click="nav(pages)">
|
|
|
<a href="javascript:void(0)">{{pages}}</a>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
<li @click="next" v-bind:class="{'disabled':currentPage>pages-1}">
|
|
|
<li class="next" v-bind:class="{'disabled':currentPage>pages-1}" @click="next">
|
|
|
<span class="current next">Next</span>
|
|
|
</li>
|
|
|
</ul>
|
...
|
...
|
@@ -29,6 +32,7 @@ |
|
|
</template>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
export default {
|
|
|
props: {
|
...
|
...
|
@@ -75,14 +79,13 @@ |
|
|
this.$dispatch('page', this.currentPage);
|
|
|
},
|
|
|
prev(){
|
|
|
alert(this.currentPage);
|
|
|
if(this.currentPage>0){
|
|
|
this.nav(this.currentPage-1)
|
|
|
}
|
|
|
},
|
|
|
next(){
|
|
|
if (this.currentPage < this.pages - 1) {
|
|
|
this.nav(o.currentPage + 1);
|
|
|
this.nav(this.currentPage + 1);
|
|
|
}
|
|
|
}
|
|
|
}
|
...
|
...
|
|