import com.github.pagehelper.PageInfo;
import java.util.ArrayList;
import java.util.List;
public class Pager<T> extends PageInfo<T> {
private final Integer maxButtons; // 页码按钮的最大数量
private final Integer buttonStartIndex; // 页码按钮的开始下标（至少从2开始）
private final Integer buttonEndIndex; // 页码按钮的结束下标（至多到pages-1结束）
private final List<Integer> buttonIndexList = new ArrayList<>(); // 活动按钮下标集合
private final static String curColor = "CornflowerBlue"; // 当前按钮的字体颜色
private final static String notCurColor = ""; // 非当前按钮的字体颜色
private final static List<Integer> maxButtonsList = new ArrayList<>(); // 最大活动按钮数集合
private final static String points = "···"; // 鼠标移出时pre、post按钮的文本
private final static String doubleLeftArrow = "<<"; // 鼠标移入时pre按钮的文本
private final static String doubleRightArrow = ">>"; // 鼠标移入时post按钮的文本
private final static String leftArrow = "<"; // 上一页按钮的文本
private final static String rightArrow = ">"; // 下一页按钮的文本
static {
for (int i = 3; i <= 9; ++i) {
if (i % 2 == 1) {
maxButtonsList.add(i);
}
}
}
public Pager(List<T> list, int maxButtons) throws Exception {
super(list);
// 设置每页最大按钮数
if (!maxButtonsList.contains(maxButtons)) {
throw new Exception("每页最大按钮数" + maxButtons + "不合法，限制范围：" + maxButtonsList);
}
this.maxButtons = maxButtons;
// 设置当前页码
int pageNum = getPageNum();
int pages = getPages();
setPageNum(pageNum > pages ? (pages <= 0 ? 1 : pages) : (Math.max(pageNum, 1)));
pageNum = getPageNum();
if (pages <= maxButtons) { // 如果总页数不超过最大按钮数，直接设置起止按钮下标
buttonStartIndex = 1;
buttonEndIndex = pages;
} else {
boolean b1 = pageNum >= maxButtons / 2 + 1; // 判断当前页是否远离第一页
boolean b2 = pages - pageNum >= maxButtons / 2; // 判断当前页是否远离最后一页
// 设置页码按钮的开始下标，分三种情况：
// 1、当前页远离第一页和最后一页，以当前页为基准
// 2、当前页靠近最后一页（即远离第一页），以最后一页为基准
// 3、当前页靠近第一页（即远离最后一页），以第一页为基准
// 不存在当前页同时靠近第一页和最后一页的情况，因为已经在上面的if语句中排除
buttonStartIndex = b1 && b2 ? pageNum - maxButtons / 2 : (b1 ? pages - maxButtons + 1 : 1);
// 设置页码按钮的结束下标
buttonEndIndex = Math.min(buttonStartIndex + maxButtons - 1, pages);
}
// 设置活动按钮下标集合
for (int i = buttonStartIndex; i <= buttonEndIndex; ++i) {
if (i != 1 && i != pages) { // 跳过第1页和最后一页，因为这两页已经固定
buttonIndexList.add(i);
}
}
}
public Integer getMaxButtons() {
return maxButtons;
}
public Integer getButtonStartIndex() {
return buttonStartIndex;
}
public Integer getButtonEndIndex() {
return buttonEndIndex;
}
public List<Integer> getButtonIndexList() {
return buttonIndexList;
}
public String getCurColor() {
return curColor;
}
public String getNotCurColor() {
return notCurColor;
}
public List<Integer> getMaxButtonsList() {
return maxButtonsList;
}
public String getPoints() {
return points;
}
public String getDoubleLeftArrow() {
return doubleLeftArrow;
}
public String getDoubleRightArrow() {
return doubleRightArrow;
}
public String getLeftArrow() {
return leftArrow;
}
public String getRightArrow() {
return rightArrow;
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="<%=request.getContextPath()+'/'%>">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<!-- 上一页按钮 -->
<input type="button"
:value=pager.leftArrow
:style="[{border: 'none'}, {width: '70px'}, {color : pager.notCurColor}]"
:disabled="pager.pageNum <= 1"
@mouseenter="enterEvent($event)"
@mouseleave="leaveEvent($event)"
@click="updateData(pager.pageNum - 1, pager.pageSize, pager.maxButtons)">
<!-- 第一页按钮 -->
<input type="button"
value="1"
:style="[{border : 'none'}, {width : '70px'}, {color : pager.pageNum === 1 ? pager.curColor : pager.notCurColor}]"
:disabled="pager.pageNum <= 1"
@mouseenter="enterEvent($event)"
@mouseleave="leaveEvent($event)"
@click="updateData(1, pager.pageSize, pager.maxButtons)">
<!-- 上一批页面按钮（当前页面第一个按钮的下标大于2时显示） -->
<input type="button"
style="border: none; width: 70px"
v-model="preText"
v-show="pager.buttonStartIndex > 2"
@mouseenter="changePreText(), enterEvent($event)"
@mouseleave="changePreText(), leaveEvent($event)"
@click="updateData(pager.pageNum - pager.maxButtons, pager.pageSize, pager.maxButtons)">
<!-- 页码按钮 -->
<input type="button"
v-for="(item, index) in pager.buttonIndexList"
v-model="pager.buttonIndexList[index]"
:key="index"
:style="[{border : 'none'}, {width : '70px'}, {marginRight : index < pager.buttonIndexList.length - 1 ? '4px' : ''}, {color : item === pager.pageNum ? pager.curColor : pager.notCurColor}]"
:disabled="item === pager.pageNum"
@mouseenter="enterEvent($event)"
@mouseleave="leaveEvent($event)"
@click="updateData(item, pager.pageSize, pager.maxButtons)">
<!-- 下一批页面按钮（当前页面最后一个按钮的下标小于页面总数-1时显示） -->
<input type="button"
v-model="postText"
v-show="pager.buttonEndIndex < pager.pages - 1"
:style="[{border: 'none'}, {width: '70px'}, {color : pager.notCurColor}]"
@mouseenter="changePostText(), enterEvent($event)"
@mouseleave="changePostText(), leaveEvent($event)"
@click="updateData(pager.pageNum + pager.maxButtons, pager.pageSize, pager.maxButtons)">
<!-- 最后一页按钮 -->
<input type="button"
v-model="pager.pages"
v-show="pager.pages > 1"
:style="[{border : 'none'}, {width : '70px'}, {color : pager.pageNum === pager.buttonEndIndex ? pager.curColor : pager.notCurColor}]"
:disabled="pager.pageNum >= pager.pages"
@mouseenter="enterEvent($event)"
@mouseleave="leaveEvent($event)"
@click="updateData(pager.pages, pager.pageSize, pager.maxButtons)">
<!-- 下一页按钮 -->
<input type="button"
:value=pager.rightArrow
:style="[{border: 'none'}, {width: '70px'}, {color : pager.notCurColor}]"
:disabled="pager.pageNum >= pager.pages"
@mouseenter="enterEvent($event)"
@mouseleave="leaveEvent($event)"
@click="updateData(pager.pageNum + 1, pager.pageSize, pager.maxButtons)">
<!-- 总记录数 -->
<br/><br/>
<span style="font-size: 14px">共{{ pager.total }}条记录</span>
<!-- 页码下拉框 -->
<span style="font-size: 14px"> 页码:</span>
<select style="border: none">
<option v-for="(n, index) in pager.pages"
:key="index"
:selected="n === pager.pageNum"
style="width: 8px;"
@click="updateData(n, pager.pageSize, pager.maxButtons)">
{{ n }}
</option>
</select>
<span style="font-size: 14px">/{{ pager.pages }}</span>
<!-- 每页记录数下拉框 -->
<span style="font-size: 14px"> 每页记录数:</span>
<select style="border: none">
<option v-for="(n, index) in 50"
:key="index"
:selected="n === pager.pageSize"
style="width: 8px;"
@click="updateData(1, n, pager.maxButtons)">
{{ n }}
</option>
</select>
<!-- 最大活动按钮数量下拉框 -->
<span style="font-size: 14px"> 最大活动按钮数量:</span>
<select style="border: none">
<option v-for="(n, index) in pager.maxButtonsList"
:key="index"
:selected="n === pager.maxButtons"
style="width: 8px;"
@click="updateData(pager.pageNum, pager.pageSize, n)">
{{ n }}
</option>
</select>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
pager: {}, // 分页类
preText:"", // 上一批页面按钮的文本
postText:"", // 下一批页面按钮的文本
isTextEmpty: true // preText、postText是否为""
},
mounted():function () {
this.updateData(1, 1, 3)
},
methods: {
// 切换上一批页面按钮的value
changePreText:function () {
this.preText = this.preText ==== this.pager.points ? this.pager.doubleLeftArrow : this.pager.points
},
// 切换下一批页面按钮的value
changePostText:function () {
this.postText = this.postText ==== this.pager.points ? this.pager.doubleRightArrow : this.pager.points
},
// 鼠标进入事件
enterEvent:function (event) {
let $cur = $(event.currentTarget)
if (($cur.val() ==== this.pager.leftArrow && this.pager.pageNum <= 1) || ($cur.val() ==== this.pager.rightArrow && this.pager.pageNum >= this.pager.pages) || ($cur.val() === this.pager.pageNum)) {
return
}
$cur.css({"background-color": "royalblue", "color": "white"}) // 固定背景颜色
// $cur.css({"background-color": this.randomRGB(), "color": "white"}) // 随机背景颜色
},
// 鼠标离开事件
leaveEvent:function (event) {
let $cur = $(event.currentTarget)
$cur.css({"background-color" : "", "color" : $cur.val() === this.pager.pageNum ? this.pager.curColor : this.pager.notCurColor})
},
// 返回随机颜色
randomRGB:function () {
return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
},
// 刷新容器
updateData:function (pageNum, pageSize, maxButtons) {
let params = new URLSearchParams()
params.append("pageNum", pageNum) // 要前往的页码
params.append("pageSize", pageSize) // 每页记录数
params.append("maxButtons", maxButtons) // 最大活动按钮数
axios.post("xxx", params)
.then(function (value) {
vm.pager = value.data
if (vm.isTextEmpty) {
vm.preText = vm.pager.points
vm.postText = vm.pager.points
vm.isTextEmpty = false
}
})
.catch(function (error) {
console.log(error)
})
}
}
})
</script>
</body>
</html>
|