最近在學習前端的時候接觸到了一些分頁的組件，考慮到這個以後會長期使用到，特在此做個整理，雖然本次使用的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>