您好,登錄后才能下訂單哦!
自定義bootstrap3的分頁組件
<template>
<nav class="pagination-nav">
<ul class="pagination">
<li :class="{'disabled': currentPage<=1}"><a href="javascript:;" @click="currentPage=1">首頁</a></li>
<li :class="{'disabled': currentPage<=1}"><a href="javascript:;" @click="prev"><span>?</span></a></li>
<li v-for="i in pageList" :key="i" :class="{'active': currentPage == i}">
<a href="javascript:;" v-text="i" @click="changePage(i)"></a>
</li>
<li :class="{'disabled': currentPage>=pageTotal}"><a href="javascript:;" @click="next"><span>?</span></a></li>
<li :class="{'disabled': currentPage>=pageTotal}"><a href="javascript:;" @click="currentPage=pageTotal">末頁</a></li>
</ul>
<div class="pagination-other">
<span v-if="showJumper">
<span>到第</span>
<input type="number" class="page-input" v-model="currentPageInput">
<span>頁</span>
<button type="button" class="page-btn" @click="jump">確定</button>
</span>
<span v-if="showSizes">
<span v-text="total"></span>
<span>條, 共</span>
<span v-text="pageTotal"></span>
<span>頁</span>
<select v-model="pageSize_" class="page-limit">
<option v-for="(item, i) in pageSizeList" :key="i" :value="item">
<span v-text="item"></span>
<span>條/頁</span>
</option>
</select>
</span>
</div>
</nav>
</template>
<script>
export default {
name: 'basicPagination',
data() {
return {
// 當(dāng)前頁
currentPage: 1,
// 當(dāng)前頁輸入框
currentPageInput: 1,
// 每頁顯示條目數(shù)
pageSize_: 10,
// 總頁數(shù)
pageTotal: 0,
// 頁碼列表
pageList: [],
// 當(dāng)前頁碼前后間隔數(shù)
breakPageNum: 0,
// 額外頁碼數(shù)
otherPage: 0,
// 每頁顯示頁碼數(shù)
pageListCount_: 5
}
},
props: {
page: {
default: 1
},
pageSize: {
default: 10
},
total: {
default: 0
},
pageSizeList: {
default: function() {
return [10, 15, 20, 25, 30]
}
},
pageListCount: {
default: 5
},
showJumper: {
default: false
},
showSizes: {
default: false
}
},
methods: {
render(beginPage) {
// 當(dāng)總記錄數(shù)小于顯示頁碼數(shù)時(shí), 將調(diào)整顯示頁碼數(shù)為總記錄數(shù)
if (this.pageTotal <= this.pageListCount_) {
this.pageListCount_ = this.pageTotal
this.pageList = []
}
for(var index = beginPage, i = 0; i < this.pageListCount_; index++, i++) {
this.pageList[i] = index
}
},
changePage(page) {
// 當(dāng)前頁切換
this.currentPage = page
},
jump() {
// 跳轉(zhuǎn)頁面
if (this.currentPageInput > this.pageTotal) {
this.currentPageInput = this.pageTotal
} else if (this.currentPageInput < 1) {
this.currentPageInput = 1
}
this.currentPage = this.currentPageInput
},
next() {
// 下一頁
if (this.currentPage < this.pageTotal) {
this.currentPage++
}
},
prev() {
// 上一頁
if (this.currentPage > 1) {
this.currentPage--
}
},
getBreakPageNum() {
// 計(jì)數(shù)當(dāng)前頁碼前后間隔數(shù)
this.breakPageNum = parseInt(this.pageListCount / 2)
// 如果每頁顯示的頁碼數(shù)是偶數(shù)的話則添加額外1個(gè)頁碼, 用于彌補(bǔ)偶數(shù)pageSize不顯示最后一個(gè)頁碼的bug
this.otherPage = this.pageListCount % 2 == 0 ? 1 : 0
},
totalInit() {
// 當(dāng)total有值時(shí)將開始計(jì)算頁碼數(shù)
this.pageTotal = Math.ceil(this.total / this.pageSize_)
this.getBreakPageNum()
let beginPage = this.currentPage - this.breakPageNum < 1 ? 1 : this.currentPage - this.breakPageNum
this.render(beginPage)
}
},
watch: {
page() {
this.currentPage = this.page
},
currentPage() {
// 當(dāng)前頁修改時(shí)觸發(fā)
this.currentPageInput = this.currentPage
if (this.currentPage > this.breakPageNum) {
if (((this.pageTotal + this.otherPage) - this.breakPageNum) >= this.currentPage) {
let beginPage = this.currentPage - this.breakPageNum
this.render(beginPage)
} else if ((this.currentPage + this.breakPageNum) >= this.pageTotal && this.currentPage <= this.pageTotal) {
let beginPage = this.pageTotal - (this.pageListCount_ - 1)
this.render(beginPage)
}
} else {
this.render(1)
}
// 當(dāng)前頁修改時(shí)觸發(fā)自定義事件
this.$emit('changePage', this.currentPage)
},
pageSize() {
this.pageSize_ = this.pageSize
},
pageSize_() {
// 顯示頁碼數(shù)修改時(shí)觸發(fā)
this.pageTotal = Math.ceil(this.total / this.pageSize_)
this.pageListCount_ = this.pageTotal <= this.pageListCount_ ? this.pageTotal : this.pageListCount
let beginPage = 1
if (this.currentPage + this.breakPageNum >= this.pageTotal) {
beginPage = this.pageTotal - (this.pageListCount_ - 1)
beginPage = beginPage <= 1 ? 1 : beginPage
} else if (this.currentPage - this.breakPageNum <= 1) {
beginPage = 1
} else {
beginPage = this.currentPage - this.breakPageNum
beginPage = beginPage <= 1 ? 1 : beginPage
}
if (this.currentPage >= this.pageTotal) this.currentPage = this.pageTotal
this.render(beginPage)
this.$emit('changePageSize', this.pageSize_)
},
total() {
// 重置每頁顯示頁碼數(shù)
this.pageListCount_ = this.pageListCount
this.totalInit()
}
},
created() {
this.total && this.totalInit()
this.pageSize_ = this.pageSize
}
}
</script>
<style scoped>
.pagination-nav {
display: table;
vertical-align: middle;
}
.pagination-other {
display: table-cell;
vertical-align: middle;
padding-left: 8px;
}
.page-input {
width: 45px;
text-align: center;
border-radius: 3px;
border: 1px solid #CCC;
transition: all .3s;
outline: none;
}
.page-btn {
border: 1px solid #CCC;
background-color: #FFF;
padding: 1px 6px;
border-radius: 3px;
outline: none;
}
.page-limit {
cursor: pointer;
padding: 2px 6px;
vertical-align: middle;
font-size: .9em;
}
</style>
屬性值Props
page: 當(dāng)前頁碼數(shù), 默認(rèn): 1, 支持.sync
pageSize: 每頁顯示條目數(shù), 默認(rèn): 10
total: 總條目數(shù), 默認(rèn): 0
pageSizeList: 可用于更換pageSize的列表, 默認(rèn): [10, 15, 20, 25, 30]
pageListCount: 顯示多少頁碼數(shù), 默認(rèn): 5
showJumper: 顯示頁碼跳轉(zhuǎn)器, 默認(rèn): false
showSizes: 顯示每頁顯示條目數(shù)修改器, 默認(rèn): false
方法
changePage: 當(dāng)當(dāng)前頁被修改時(shí)觸發(fā), 回調(diào)參數(shù): currentPage
changePageSize: 當(dāng)每頁顯示條目數(shù)被修改時(shí)觸發(fā), 回調(diào)參數(shù): pageSize
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。