版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012303775/article/details/80100065
第一种分页样式效果图如下：
1.页面代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE>
<html>
<head>
<title>用户</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 分页 -->
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<link rel="stylesheet" href="css/page.css" media="all" />
<script type="text/javascript" src="js/page.js"></script>
</head>
<body>
<!-- 分页 -->
<div class="modw_page" id="page_div"></div>
<script type="text/javascript">
!function () {
pageHelper.page({
domId: "page_div",//要绑定的元素id
pageIndex: 10,//当前页码
pageTotal: 60,//总页数
//查询参数
searchParam: { name: '德玛', type: 'BBS'}
});
}();
</script>
</body>
</html>2.分页样式page.css
/*第一种分页样式 begin*/
.modw_page{text-align: right;line-height: 30px;font-size: 10px;margin-top:10px;font-family: "微软雅黑";}
.modw_page a{display: inline-block;padding: 0px 10px;border:1px solid #ccc;margin:0 2px;border-radius:5px;}
.modw_page a:hover{color: #009688;border:1px solid #009688;}
.modw_page span{margin: 0px 10px;}
.modw_page .modwp_input{border-radius:5px;width: 40px;}
.modw_page .modwp_submit{color: #fff;background: #0077EE;width: 50px;line-height: 30px;height: 30px;}
.modw_page .modwp_input{padding: 0px 10px;line-height: 30px;text-align: center;border:1px solid #ccc;}
.modw_page .modwp_subt{border-radius:5px;color:#333;background: #fff;border:1px solid #ccc;padding: 0px 10px;line-height: 30px;cursor:pointer;}
.modw_page .modwp_subt:hover{color: #009688;border:1px solid #009688;}
.modw_page .lsit_sty{color:#009688;margin-left: 15px;margin-right: 15px;}
/*页码 end*/ 3.分页js库page.js
!function (w) {
//删除字符串前后的空格
String.prototype.trim = function () {
return this.replace(/(^\s*)|(\s*$)/g, "");
}
w.pageHelper = {
//分页方法
page: function (a) {
//获取问号前面的地址
var webUrl = window.location.href;
var wh_Index = webUrl.indexOf("?");
var qian_url = webUrl;
if (wh_Index!=-1) {
qian_url = webUrl.substring(0, wh_Index);
}
var pfo = {
domId: '',
pageIndex: 1, //当前页码
pageTotal: 1, //总页数
searchParam: '', //搜索参数
firtPage: "\u9996\u9875",//首页
lastPage: "\u672b\u9875",//末页
perPageTxt: "\u4e0a\u4e00\u9875",//上一页
nextPageTxt: "\u4e0b\u4e00\u9875",//下一页
urlPerfix: qian_url //url地址
}
function render(){
if (pfo.pageTotal == 1) {
return;
}
var htmlArr = [];
//首页
htmlArr.push('<a href="' + pfo.urlPerfix + '?page=1"><span id="firtPage">' + pfo.firtPage + '</span></a>');
//上一页
if (pfo.pageIndex == 1) {
htmlArr.push('<a href=""><span>' + pfo.perPageTxt + '</span></a>');
} else {
htmlArr.push('<a href="' + pfo.urlPerfix + '?page=' + parseInt(pfo.pageIndex - 1) + pfo.searchParam +'"><span id="prePage">' + pfo.perPageTxt + '</span></a>');
}
//显示页
if (pfo.pageTotal <= 10) {
for (var i = 0; i < pfo.pageTotal; i++) {
var pageIndex = i + 1;
if (pageIndex == pfo.pageIndex) {
htmlArr.push('<span class="lsit_sty">' + pageIndex + '</span>');
} else {
htmlArr.push('<a href="' + pfo.urlPerfix + '?page=' + pageIndex + pfo.searchParam + '"><span>' + pageIndex + '</span></a>');
}
}
} else if (pfo.pageTotal > 10) {
//当前页码左侧3个，从左往右
var arr = [];
var left01_pageIndex = 0;
var left02_pageIndex = 0;
var left03_pageIndex = 0;
if (pfo.pageIndex > 0) {
left01_pageIndex = pfo.pageIndex - 3;
left02_pageIndex = pfo.pageIndex - 2;
left03_pageIndex = pfo.pageIndex - 1;
}
if (left01_pageIndex > 1) {
arr.push(left01_pageIndex);
}
if (left02_pageIndex > 1) {
arr.push(left02_pageIndex);
}
if (left03_pageIndex > 1) {
arr.push(left03_pageIndex);
}
//右侧页码3个，从左往右
var right01_pageIndex = pfo.pageIndex + 1;
var right02_pageIndex = pfo.pageIndex + 2;
var right03_pageIndex = pfo.pageIndex + 3;
if (pfo.pageIndex > 0) {
arr.push(pfo.pageIndex);//当前页码
}
if (right01_pageIndex < pfo.pageTotal) {
arr.push(right01_pageIndex);
}
if (right02_pageIndex < pfo.pageTotal) {
arr.push(right02_pageIndex);
}
if (right03_pageIndex < pfo.pageTotal) {
arr.push(right03_pageIndex);
}
for (var j = 0; j < arr.length; j++) {
var pi = arr[j];
if (pi == pfo.pageIndex) {
//显示当前页码
htmlArr.push('<span class="lsit_sty">' + pi + '</span>');
} else {
htmlArr.push('<a href="' + pfo.urlPerfix + '?page=' + pi + pfo.searchParam + '"><span>' + pi + '</span></a>');
}
}
}
//下一页
if (pfo.pageIndex != pfo.pageTotal) {
htmlArr.push('<a href="' + pfo.urlPerfix + '?page=' + parseInt(pfo.pageIndex + 1) + pfo.searchParam + '"><span id="nextPage">下一页</span></a>');
} else {
htmlArr.push('<a href=""><span>下一页</span></a>');
}
//末页
htmlArr.push('<a href="' + pfo.urlPerfix + '?page=' + pfo.pageTotal + '"><span id="lastPage">末页</span></a>');
htmlArr.push('<span>共' + pfo.pageTotal + '页,</span>到第 ');
htmlArr.push('<input type="text" value="' + pfo.pageIndex + '" id="input_go" onkeyup="chenkPage(' + pfo.pageTotal + ')" class="modwp_input"> 页 ');
htmlArr.push('<input type="button" value="确认" onclick="checkGo()" id="btn_dis" class="modwp_subt">');
$("#" + pfo.domId).html(htmlArr.join(""));
}
//分页,需要依赖jquery包引用
//解析参数，参数配置例如（参数是个对象）：pfo.searchParam:{ name: '德玛', type: 'ABS', id: 88 } <span>共${page.totalPage}页,</span>到第
var cshu = "";
if (a.searchParam != undefined && a.searchParam != null && typeof (a.searchParam) == "object") {
var sz = [];
for (var name in a.searchParam) {
var cs = name + "=" + a.searchParam[name];
sz.push(cs);
}
cshu = "&" + sz.join("&");
}
//绑定的元素的id
pfo.domId = a.domId;
pfo.pageIndex = a.pageIndex;
pfo.pageTotal = a.pageTotal;
pfo.searchParam = cshu;
render();
}
};
}(window);
//输入页错误提示
function chenkPage(obj){
var go = $("#input_go").val();
if(parseInt(go) > obj){
alert("请输入正确的页码！");
return;
}
}
//页跳转
function checkGo(){
var go = $("#input_go").val();
var page = "?page=" + go;
if(!isNaN(go)){
window.location.href = page;
}else{
alert("请输入正确的页码！");
return;
}
}