Java Web——商品分页

本文参与「少数派读书笔记征文活动」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;
                    }