|
|
|
<template>
|
|
|
|
<div class="pagination-container">
|
|
|
|
<template v-if="rowsTotal > 0">
|
|
|
|
<template v-if="pages > 0">
|
|
|
|
<nav>
|
|
|
|
<ul class="pagination light-theme simple-pagination">
|
|
|
|
<li v-bind:class="{'disabled':isFirst}" @click="prev">
|
|
|
|
<li v-bind:class="{'disabled':currentPage<2}" @click="prev">
|
|
|
|
<span class="current prev">Prev</span>
|
|
|
|
</li>
|
|
|
|
<li v-for="n in pageChunkCurrent" v-bind:class="{'active':isActive[n+1]}" @click="nav( n+1 )">
|
|
|
|
<a href="javascript:void(0)">{{n + 1}}</a>
|
|
|
|
<li v-for="n in draw" v-bind:class="{'active':n===currentPage}" @click="nav(n)">
|
|
|
|
<a href="javascript:void(0)">{{n}}</a>
|
|
|
|
</li>
|
|
|
|
<li @click="next" v-bind:class="{'disabled':isLast}">
|
|
|
|
<li @click="next" v-bind:class="{'disabled':currentPage>pages-1}">
|
|
|
|
<span class="current next">Next</span>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
...
|
...
|
@@ -17,120 +17,51 @@ |
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
<script type="text/javascript">
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
pageSize: {
|
|
|
|
type: Number,
|
|
|
|
default: 10
|
|
|
|
},
|
|
|
|
rowsTotal: {
|
|
|
|
pages: {
|
|
|
|
type: Number,
|
|
|
|
required: true
|
|
|
|
},
|
|
|
|
page: {
|
|
|
|
currentPage: {
|
|
|
|
type: Number,
|
|
|
|
required: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
rowsTotal(newVal, oldVal) {
|
|
|
|
if (newVal !== oldVal) {
|
|
|
|
// init option when rows changes
|
|
|
|
this.page = 1
|
|
|
|
this.isFirst = true
|
|
|
|
this.isLast = false
|
|
|
|
computed:{
|
|
|
|
draw(){
|
|
|
|
var bll=this,arr=[];
|
|
|
|
let beginNum = bll.currentPage - 4;
|
|
|
|
if (beginNum > bll.pages - 8) beginNum = bll.pages - 8;
|
|
|
|
if (beginNum < 1) beginNum = 1;
|
|
|
|
let endNum = beginNum + 8;
|
|
|
|
if (endNum > bll.pages) endNum = bll.pages;
|
|
|
|
for (let i = beginNum; i <= endNum; i++)
|
|
|
|
{
|
|
|
|
arr.push(i);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
pageTotal(newVal, oldVal) {
|
|
|
|
if (newVal === 1) {
|
|
|
|
// only one page
|
|
|
|
this.isFirst = true
|
|
|
|
this.isLast = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
pageChunkCurrent() {
|
|
|
|
let pageTotal = Math.ceil(this.rowsTotal / this.pageSize)
|
|
|
|
let pageArr = []
|
|
|
|
for (let i = 0; i < pageTotal; i++) {
|
|
|
|
pageArr[i] = i
|
|
|
|
}
|
|
|
|
let pageChunk = []
|
|
|
|
let j = pageArr.length
|
|
|
|
for (let i = 0; i < j; i += this.pageSize) {
|
|
|
|
pageChunk.push(pageArr.slice(i, i + this.pageSize))
|
|
|
|
}
|
|
|
|
return pageChunk[this.pageChunkIndex]
|
|
|
|
},
|
|
|
|
pageTotal() {
|
|
|
|
let total = Math.ceil(this.rowsTotal / this.pageSize)
|
|
|
|
if (total === 1) {
|
|
|
|
this.isLast = true
|
|
|
|
this.isFirst = true
|
|
|
|
}
|
|
|
|
return Math.ceil(this.rowsTotal / this.pageSize)
|
|
|
|
},
|
|
|
|
isActive() {
|
|
|
|
let pageTotal = this.pageTotal
|
|
|
|
let o = {}
|
|
|
|
for (let i = 0; i < pageTotal; i++) {
|
|
|
|
o[i + 1] = 0
|
|
|
|
}
|
|
|
|
o['actived'] = this.page
|
|
|
|
o[this.page] = 1
|
|
|
|
return o
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
let pageTotal = this.pageTotal
|
|
|
|
let pageArr = []
|
|
|
|
for (let i = 0; i < pageTotal; i++) {
|
|
|
|
pageArr[i] = i
|
|
|
|
}
|
|
|
|
let pageChunk = []
|
|
|
|
let j = pageArr.length
|
|
|
|
for (let i = 0; i < j; i += this.pageSize) {
|
|
|
|
pageChunk.push(pageArr.slice(i, i + this.pageSize))
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
pageChunk: pageChunk,
|
|
|
|
pageChunkIndex: 0,
|
|
|
|
isLast: false,
|
|
|
|
isFirst: true
|
|
|
|
return arr;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
nav(n) {
|
|
|
|
let activeObj = this.isActive
|
|
|
|
activeObj[activeObj['actived']] = 0
|
|
|
|
activeObj[n] = 1
|
|
|
|
activeObj['actived'] = n
|
|
|
|
n === 1 ? this.isFirst = true : this.isFirst = false
|
|
|
|
this.pageTotal === n ? this.isLast = true : this.isLast = false
|
|
|
|
this.page = n
|
|
|
|
this.$dispatch('page', this.page)
|
|
|
|
methods:{
|
|
|
|
nav(n){
|
|
|
|
this.currentPage=n;
|
|
|
|
this.$dispatch('page', this.currentPage);
|
|
|
|
},
|
|
|
|
next() {
|
|
|
|
let activeObj = this.isActive
|
|
|
|
if (activeObj.actived % this.pageSize === 0) {
|
|
|
|
this.pageChunkIndex += 1
|
|
|
|
this.pageChunkCurrent = this.pageChunk[this.pageChunkIndex]
|
|
|
|
}
|
|
|
|
if (activeObj.actived + 1 <= this.pageTotal) {
|
|
|
|
this.nav(activeObj.actived + 1)
|
|
|
|
prev(){
|
|
|
|
alert(this.currentPage);
|
|
|
|
if(this.currentPage>0){
|
|
|
|
this.nav(this.currentPage-1)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
prev() {
|
|
|
|
let activeObj = this.isActive
|
|
|
|
if (activeObj.actived - 1 >= 1) {
|
|
|
|
this.nav(activeObj.actived - 1)
|
|
|
|
}
|
|
|
|
if (activeObj.actived % this.pageSize === 0) {
|
|
|
|
this.pageChunkIndex -= 1
|
|
|
|
this.pageChunkCurrent = this.pageChunk[this.pageChunkIndex]
|
|
|
|
next(){
|
|
|
|
if (this.currentPage < this.pages - 1) {
|
|
|
|
this.nav(o.currentPage + 1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
...
|
...
|
|
