<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
padding: 0;
margin: 0;
broder: none;
}
#app {
margin: 0 auto;
text-align: center;
}
#mylink {
color: #efefef;
}
.pagination {
list-style: none;
text-align: center;
height: 50px;
padding-top: 50px;
margin: 0 auto;
}
.pagination > li {
float: left;
margin: 0 5px;
}
} </style>
<link th:href="@{/static/css/style.css}" rel="stylesheet">
<script th:src="@{/static/js/jquery/jquery-1.8.3.min.js}"></script>
<script th:src="@{/static/js/vue/vue.2.6.11.js}"></script>
</head>
<body>
<div id="app" >
<!--列表数据显示-->
<li v-for="p in userList">
<div class="industry_inner">
<div class="industry_txt">
<span>{{p.id}}</span>
<span>{{p.name}}</span>
<span>{{p.age}} </span>
<span>{{p.email}}</span>
</div>
</div>
<hr/>
</li>
<!--分页栏-->
<ul class="pagination">
<!--首先-->
<li>
<a v-if="currentPage == 1">首页</a>
<a v-else href="javascript:;" @click="next(1)">首页</a>
</li>
<!--上一页-->
<li v-if="currentPage<=1"><a>上一页</a></li>
<li v-else><a href="javascript:;" @click="next(currentPage-1)">上一页</a></li>
<div class="pager">
<li v-for="item in pagingList" @click="next(item.value)">
<div class="page_num" :class="item.key == currentPage?'active_bg':''">{{item.key}}</div>
</li>
</div>
<!--下一页-->
<li v-if="currentPage>=totalPageCount"><a>下一页</a></li>
<li v-else><a href="javascript:;" @click="next(currentPage+1)">下一页</a></li>
<!--尾页-->
<li>
<a v-if="totalPageCount == currentPage">尾页</a>
<a v-else href="javascript:;" @click="next(totalPageCount)">尾页</a>
</li>
<!--跳转-->
<li class="action"></li>
<li>
跳转 <input type="number" class="input_num" min="1" value="1" v-bind:max="maxJumpPage" id="input_num"
@keyup="jumpPage()">页
</li>
<li>
<!--总页数-->
<span>共:{{totalPageCount||0}}页,当前页为第{{currentPage||0}}页</span>
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
//省略的符号
sign: '...',
//省略号位置
signIndex: 6,
//总页数
totalPageCount: 0,
//当前页
currentPage: 1,
//每页显示数量
page_size: 8,
//显示在页面的数组列表
pagingList: [],
//展示业务数据列表
userList: [],
//页面显示最大的页数
maxShowPage: 8,
//最大跳转页数,即总页数
maxJumpPage: 1
},
watch: {
totalPageCount(val) {
var that = this;
if (!val || val == '') return;
that.currentPage = 1;
that.init()
},
currentPage(val) {
var that = this;
that.init()
}
},
methods: {
// 页码切换
next(num) {
var that = this;
if (num <= 1) that.currentPage = 1;
else if (num >= that.totalPageCount) that.currentPage = that.totalPageCount;
else that.currentPage = num;
},
//根据输入值跳转页码
jumpPage() {
var that = this;
//获取要跳转的值
var toPage = $("#input_num").val();
if (toPage < 1 || toPage > that.totalPageCount) {
$("#input_num").val(that.currentPage);
return false;
}
that.currentPage = toPage;
that.init()
},
// 初始化数据
fetchData() {
var that = this;
that.pagingList = [];
var tmp = null;
var maxPage = that.maxShowPage;
//如果总页数大于页面显示最大页数
if ((that.totalPageCount) > maxPage) {
//当前点击首页或者第一页且页数大于页面显示最大页数
if ((that.currentPage === 1) && (that.totalPageCount > maxPage)) {
for (var i = 1; i < maxPage + 1; i++) {
if (i < that.signIndex) {
tmp = {key: i, value: i}
} else if (i === that.signIndex) {
tmp = {key: that.sign, value: 0}
//处理省略号后面N位
} else {
tmp = {key: that.totalPageCount - maxPage + i, value: that.totalPageCount - maxPage + i}
}
that.pagingList.push(tmp)
}
//处理尾部布局, 当页数到达最后一组页数列表时,不需要显示省略号
} else if (((that.totalPageCount - that.currentPage) <= (that.maxShowPage - 3))) {
//计算最后一页起始位置
var starNum = that.totalPageCount - maxPage + 1;
for (var i = starNum; i < starNum + maxPage; i++) {
tmp = {key: i, value: i};
that.pagingList.push(tmp)
}
} else {
//处理中间页数布局 页数处理范围[2 - (that.totalPageCount - maxPage + 1)]
var starNum = that.currentPage - 1;
for (var i = 1; i < maxPage + 1; i++) {
if (i < that.signIndex) {
//填入省略号前数字
tmp = {key: (starNum - 1) + i, value: (starNum - 1) + i}
} else if (i === that.signIndex) {
//填入省略号
tmp = {key: that.sign, value: 0}
//处理省略号后面N位
} else {
tmp = {key: that.totalPageCount - maxPage + i, value: that.totalPageCount - maxPage + i}
}
that.pagingList.push(tmp)
}
}
} else {
//如果总页数不到页面显示最大页数,则全部展示
for (var i = 0; i < that.totalPageCount; i++) {
tmp = {key: i + 1, value: i + 1};
that.pagingList.push(tmp)
}
}
},
init() {
var that = this;
that.fetchData();
this.getDataList();
},
//请求业务数据
getDataList: function () {
//前后端交互 参数: 第几页, 每页条数
var currentPage = this.currentPage;
var page_size = this.page_size;
$.ajax({
url: '/user/list/' + currentPage + "/" + page_size,
type: 'GET',
contentType: false,
processData: false,
dataType: "json",
success: function (res) {
app.userList = res.data.userList;
app.totalPageCount = res.data.total_page;
app.page_size = res.data.page_size;
app.currentPage = res.data.page;
app.maxJumpPage = res.data.total_page;
}
});
}
},
//生命周期回调
mounted() {
var that = this;
that.init()
}
})
</script>
</body>
</html>
js分页省略号
最新推荐文章于 2024-10-02 05:39:15 发布