分页省略号跳转相关功能原生写法
最近在学习前端的时候接触到了一些分页的组件，考虑到这个以后会长期使用到，特在此做个整理，虽然本次使用的Vue但是其中的代码都是可以应用到其他地方的，完全原生的写法，只需要简单修改或者换一种方式即可，没有使用Vue相关的分页组件，其中功能大致如下： 首页，上一页，下一页，尾页，跳转（需要限制数字），页数过多显示省略号，省略号位置和页面页数都需要可以进行调整的,效果图如下，只为演示功能，没有额外的样式效果，具体的参数都可以在Vue的data属性中进行设置切换，详细请看代码注释
后端使用的是MyBatis的分页，需要前端传来俩个参数，当前页数，每页数量
后端接口API和返回数据参数
http://localhost:8080/user/list/1/2
{
"code": 200,
"message": "OK",
"data": {
//总数
"total": 87,
//业务数据列表
"userList": [
{
"id": 1,
"name": "姓名1",
"age": 1,
"email": "邮箱1"
},
{
"id": 2,
"name": "姓名2",
"age": 2,
"email": "邮箱2"
}
],
//总页数
"total_page": 44,
//页码
"page": 1,
//每页大小
"page_size": 2
}
}
前端代码
<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>