Java Web——商品分页

梦里梦外; 2022-05-17 13:36 201阅读 0赞

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

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

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

**实现效果：**

![70][]

**jsp部分：**

备注：nncnnnn即表示页面上最多显示7个页码；  
elements在java中利用mysql查询即可得出;  
page:我的想法是鼠标点击第m页，则在跳转地址后面加上page参数（[http://localhost:8088/exp1/GetProductInfo?page=m][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;
                        }

[https_sspai.com_post_45653]: https://sspai.com/post/45653
[https_github.com_infusion_jQuery-Paging]: https://github.com/infusion/jQuery-Paging
[70]: /images/20220517/448d70cfa74845508dbb46b849ad7e87.png
[http_localhost_8088_exp1_GetProductInfo_page_m]: http://localhost:8088/exp1/GetProductInfo?page=m