本文参与「少数派读书笔记征文活动」https://sspai.com/post/45653

使用的jquery插件库：https://github.com/infusion/jQuery-Paging

我其实只了解一点点的js，所以我在用这个jquery库的时候，完全是连蒙带猜的看说明+源码，最后利用debug，勉勉强强实现了分页功能；会jquery的同学可以自行去github看源码了；

实现效果：

jsp部分：

<script type="text/javascript" src="js/jquery.min.js"></script>
<link href="css/pagination_style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.paging.js"></script>
<div class="pagelink">
    <!-- 隐藏标签，存储元素总数(即商品总数)；我是在servlet中利用request.setAttribute存储的-->
	<input type="hidden" name="elements" value="${elements}">   
    <!-- 隐藏标签，存储当前所在页码(页面刷新后页码不变)；同样是在servlet中利用request.setAttribute存储的-->
	<input type="hidden" name="currentpage" value="${page}">
	<ul id="paging" class="pagination modal-2">
		<li>&lt; </li>   <!-- 向前翻7页 -->
		<li> first </li>    <!-- 回到第一页 -->
		<li> #n</li>
		<li> #n</li>
		<li> #c</li>    <!-- current,即向前/后翻页时自动定位（第三个n）-->
		<li> #n</li>
		<li> #n</li>
		<li> #n</li>
		<li> #n</li>
		<li> last </li>   <!-- 到达最后一页 -->
		<li> &gt;</li>    <!-- 向后翻7页 -->
	</ul>
</div>
<div id="output"></div>

备注：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标签的最后即可）：

    <script type="text/javascript">
        elements=parseInt($("input[name='elements']").val());	//总元素
        currentpage_str=$("input[name='currentpage']").val();	//当前page/初始page
        if(currentpage_str===""){
            currentpage=1;
        }else{
            currentpage=parseInt(currentpage_str);
        }

        var $li=$(".pagination").children("li");
        var masks = {};
        var format_buff="";
        $li.each(function(i) {
            if (0 === i) {
                masks.prev = this.innerHTML;
                format_buff += "<";
            } else if(1 === i) {
                masks.first = this.innerHTML;
                format_buff += "["
            } else if (i === $li.length - 2) {
                masks.last=this.innerHTML;
                format_buff += "]"
            } else if (i + 1 === $li.length) {
                masks.next = this.innerHTML;
                format_buff += ">";
            } else {
                masks[i-1] = this.innerHTML.replace(/#[nc]/, function(str) {
                    format_buff += str.replace("#", "");
                    return "([...])";
                });
            }
        });

        pages = 1 + Math.ceil((elements - 16) / (16 - 0));    //自行计算总页数（16是每页最多显示的商品数，自行设定）
        $("#output").html("You are on page "+currentpage+"/"+pages);

        var pager=$("#paging").paging(elements,{
            perpage:16,    //每页最多显示16个商品（可自行设定）
            page:currentpage,
            format:format_buff,

            onClick:function(ev){
                ev.preventDefault();    //阻止ev元素发生默认的行为，比如表单的提交、URL的打开
                var cpage=$(this).data('page');    //切换页面

                //Call asynchronously,could be ajax,or whatever
                window.setTimeout(function(){   //500毫秒后......
                    pager.setPage(cpage);    //跳转页面

                    //可以自行添加切换页面以后的动作
                },500);
            },

            //Typical onFormat handler
            onFormat:function(type){
                var value = "";
                switch (type) {
                    case 'block':
                        value = masks[this["pos"]].replace("([...])", this["value"]);
                        //没有被激活
                        if (!this['active'])
                            return '<li><a href="#">' + value + '</a></li>';
                        //已经激活，但不是初始的current，需要跳转
                        if (this["page"] !== this["value"])
                            return '<li><a href="#' + this["value"] + '">' + value + '</a></li>';
                        //已经激活，初始的current
                        return '<li><a href="#" class="current">' + value + '</a></li>';
                    case 'next':
                        if (!this['active'])
                            return '<li><a href="#" class="next">' + masks[type] + '</a></li>';
                        return '<li><a href="#' + this["value"] + '" class="next">' + masks[type] + '</a></li>';
                    case 'prev':
                        if (!this['active'])
                            return '<li><a href="#" class="prev">' + masks[type] + '</a></li>';
                        return '<li><a href="#' + this["value"] + '" class="prev">' + masks[type] + '</a></li>';
                    case 'first':
                        if (!this['active'])
                            return '<li><a href="#" class="first">' + masks[type] + '</a></li>';
                        return '<li><a href="#' + this["value"] + '" class="first">' + masks[type] + '</a></li>';
                    case 'last':
                        if (!this['active'])
                            return '<li><a href="#" class="last">' + masks[type] + '</a></li>';
                        return '<li><a href="#' + this["value"] + '" class="last">' + masks[type] + '</a></li>';
                }
            }
        });
    </script>

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;
                    }