代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pager</title>
<style>
#pager li {
list-style-type: none;
display: inline-block;
border: 1px solid #c9c9c9;
margin: 6px;
padding: 8px 13px;
border-radius: 5px;
color: #222;
}
#pager .pc,
#pager .n:not(.hide) {
cursor: pointer;
}
#pager .etc {
border: 0;
}
#pager .current_page {
border: 1px solid #1e9fff;
background: #1e9fff;
color: #fff;
font-weight: 600;
}
#pager .hide {
color: #fff;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div id="app">
<div id="pager">
<ul onselectstart="return false">
<!-- 总条数 -->
<li v-show="show_total" class="count">共{{total}}条记录</li>
<!-- 按钮: 上一页 -->
<li @click="if(current_page>1) set_page('prev')" class="n" :class="{'hide' : current_page == 1}">< 上一页</li>
<!-- 按钮:第1页 -->
<li @click="set_page(1)" :class="1 == current_page ? 'current_page' : 'pc'">1</li>
<!-- 省略号 -->
<!-- mark -->
<li v-show="pager_middle.length && (pager_middle[0] != 2)" class="etc">...</li>
<!-- 按钮: 中间页 -->
<li @click="set_page(v)" v-for="(v,k) in pager_middle" :class="v == current_page ? 'current_page' : 'pc'">{{v}}</li>
<!-- 省略号 -->
<li v-show="pager_middle.length && (pager_middle[pager_middle.length - 1] != max_page - 1)" class="etc">...</li>
<!-- 按钮: 最后1页 -->
<li @click="set_page(max_page)" v-show="max_page != 1"
:class="max_page == current_page ? 'current_page' : 'pc'">
{{max_page}}</li>
<!-- 按钮: 下一页 -->
<li @click="set_page('next')" v-show="current_page < max_page" class="n">下一页 ></li>
</ul>
</div>
</div>
</body>
<script src="//static.class4ever.com/vuejs/v2.6.10/vue.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
//总条数
total: 65536,
//每页条数
page_size: 10,
//当前页
current_page: 1,
//数字按钮最多个数, 通常不可小于4
btn_num: 10,
//是否显示总条数
show_total: true,
},
computed: {
//计算总共有多少页
max_page: function () {
return parseInt((this.total - 1) / this.page_size + 1);
},
/**中间有哪些数字 */
pager_middle: function () {
//初始化数组
var arr = []
//中间按钮个数
var btn_mid = this.btn_num - 2
//得到一些参数
if (btn_mid % 2) {
var half = Math.floor(btn_mid / 2)
var left = half
} else {
var half = btn_mid / 2
var left = half - 1
}
//初步生成数组
for (let i = this.current_page - left; i < this.current_page + half + 1; i++)
if (i > 1 && i < this.max_page)
arr.push(i)
//补齐
if (arr.length < btn_mid) {
//补齐右边
if (arr[0] === 2) {
//记录数组长度
var length = arr.length
for (var i = 2 + length; i < 2 + btn_mid; i++)
if (i < this.max_page)
arr.push(i)
}
//补齐左边
else {
//记录第1个小孩
let firstChild = arr[0]
//记录需要补充几个
var need = btn_mid - arr.length + 1
for (var i = firstChild - 1; i > firstChild - need; i--)
if (i > 1)
arr.unshift(i)
}
}
return arr
}
},
methods: {
/**页面跳转 */
set_page: function (param) {
//将要去的页码
var page
switch (param) {
case 'prev':
page = this.current_page - 1
break
case 'next':
page = this.current_page + 1
break
default:
page = param
}
if (this.get(page))
this.current_page = page
},
/**此处填入功能 */
get: function (page) {
console.log('do something')
return true
}
}
})
</script>
</html>