本文参与「少数派读书笔记征文活动」https://sspai.com/post/45653
使用的jquery插件库:https://github.com/infusion/jQuery-Paging
我其实只了解一点点的js,所以我在用这个jquery库的时候,完全是连蒙带猜的看说明+源码,最后利用debug,勉勉强强实现了分页功能;会jquery的同学可以自行去github看源码了;
实现效果:
jsp部分:
- <
- first
- #n
- #n
- #c
- #n
- #n
- #n
- #n
- last
- >
备注:nncnnnn即表示页面上最多显示7个页码;
elements在java中利用mysql查询即可得出;
page:我的想法是鼠标点击第m页,则在跳转地址后面加上page参数(http://localhost:8088/exp1/GetProductInfo?page=m),然后在servlet中利用request.setAttribute存储,保证页面重新加载,页码不变
css部分(自行定义即可,这个是我在网上找的一个样式):
.pagelink {
text-align:center;
}
#output{
text-align:center;
color:#337ab7;
}
.pagination {
list-style: none;
padding: 0;
margin-top: 10px;
}
.pagination li {
display: inline;
text-align: center;
}
.pagination a {
float: left;
display: block;
font-size: 14px;
text-decoration: none;
padding: 5px 12px;
color: #fff;
margin-left: -1px;
border: 1px solid transparent;
line-height: 1.5;
}
.pagination a.current {
cursor: default;
}
.pagination a:active {
outline: none;
}
.modal-2 a.prev {
-moz-border-radius: 50px 0 0 50px;
-webkit-border-radius: 50px;
border-radius: 50px 0 0 50px;
}
.modal-2 a.prev:after {
content: '';
position: absolute;
width: 10px;
height: 100%;
top: 0;
right: 0;
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.modal-2 a.next {
-moz-border-radius: 0 50px 50px 0;
-webkit-border-radius: 0;
border-radius: 0 50px 50px 0;
}
.modal-2 a.next:after {
content: '';
position: absolute;
width: 10px;
height: 100%;
top: 0;
left: 0;
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}
.modal-2 a {
border-color: #ddd;
color: #999;
background: #fff;
}
.modal-2 a:hover {
color: #E34E48;
background-color: #eee;
}
.modal-2 a.current, .modal-2 a:active {
border-color: #E34E48;
background: #E34E48;
color: #fff;
}
js部分(直接放在body标签的最后即可):
servlet部分:
得到当前页参数page后,选择数据库中相应页数据即可,例:select * from product_info limit (page-1)*perpage,perpage
补充:jquery.paging.js文件中的下面这段代码,其实就是设置页面跳转功能的,我修改了prev和next的代码(注释代码为原代码),主要是为了设置向前/后翻页时,一次性翻perpage页,而不是1页;(block就是普通页码)
switch (node.ftype) {
case "block":
for (; rStart < rStop; ++rStart) {
data["value"] = rStart;
data["pos"] = 1 + format.blockwide - rStop + rStart;
data["active"] = rStart <= pages || number < 0; // true if infinity series and rStart <= pages
data["first"] = 1 === rStart; // check if it is the first page
data["last"] = rStart === pages && 0 < number; // false if infinity series or rStart != pages
buffer_append(opts, data, node.ftype);
}
continue;
case "left":
data["value"] = node.fpos;
data["active"] = node.fpos < rStart; // Don't take group-visibility into account!
break;
case "right":
data["value"] = pages - format.rights + node.fpos;
data["active"] = rStop <= data["value"]; // Don't take group-visibility into account!
break;
case "first":
data["value"] = 1;
data["active"] = tmp && 1 < page;
break;
case "prev":
if ((data["active"] = opts["circular"])) {
data["value"] = page === 1 ? pages : page - 1;
} else {
//data["value"] = Math.max(1, page - 1);
data["value"] = Math.max(1, page - opts.perpage);
data["active"] = tmp && 1 < page;
}
break;
case "last":
if ((data["active"] = (number < 0))) {
data["value"] = 1 + page;
} else {
data["value"] = pages;
data["active"] = tmp && page < pages;
}
break;
case "next":
if ((data["active"] = opts["circular"])) {
data["value"] = 1 + page % pages;
} else if ((data["active"] = (number < 0))) {
data["value"] = 1 + page;
} else {
//data["value"] = Math.min(1 + page, pages);
data["value"] = Math.min(opts.perpage + page, pages);
data["active"] = tmp && page < pages;
}
break;
case "leap":
case "fill":
data["pos"] = node.fpos;
data["active"] = tmp; // tmp is true by default and changes only for group behaviour
buffer_append(opts, data, node.ftype);
continue;
}