页面效果
需求
1.分页只显示5个数据，当前页字体为红色；
2.前两页保持不变，后面以当前页为中心前后各一页；
3.搜索通过enter键可直接跳转到页面；
需求分析
1.创建page实体类，属性包括：
查询当页数据的第一条数据的索引start；
每页显示条数count
总页数total
// pojo public class Page { private int start; private int count; private int total; private static final int defaultCount = 5; public Page() { count = defaultCount; } public Page(int start, int count) { this(); this.start = start; this.count = count; } public int getStart() { return start; } public void setStart(int start) { this.start = start; } public int getCount() { return count; } public void setCount(int count) { this.count = count; } public int getTotal() { return total; } public void setTotal(int total) { this.total = total; } public String getParam() { return param; } public void setParam(String param) { this.param = param; } /** * 判断是否有前一页 * @return boolean */ public boolean isHasPreviouse() { if (start == 0) { return false; } return true; } /** * 判断是否有后一页 * @return boolean */ public boolean isHasNext() { if (start == getLast()){ return false; } return true; } /** * 计算出最后一页的数值是多少 * @return int */ public int getLast() { int last; // 假设总数是50，是能够被5整除的，那么最后一页的开始就是45 if (0 == total % count) last = total - count; // 假设总数是51，不能够被5整除的，那么最后一页的开始就是50 else last = total - total % count; last = last < 0 ? 0 : last; return last; } /** * 根据 每页显示的数量count以及总共有多少条数据total，计算出总共有多少页 * @return int */ public int getTotalPage() { int totalPage; // 假设总数是50，是能够被5整除的，那么就有10页 if (0 == total % count) { totalPage = total / count; } // 假设总数是51，不能够被5整除的，那么就有11页 else { totalPage = total / count + 1; } if (0 == totalPage) { totalPage = 1; } return totalPage; } // 计算当前页，用第一个索引/页面条数 + 1 public int getCurrentPage() { int currentPage = start / count + 1; return currentPage; } @Override public String toString() { return "Page [start=" + start + ", count=" + count + ", total=" + total + ", getStart()=" + getStart() + ", getCount()=" + getCount() + ", isHasPreviouse()=" + isHasPreviouse() + ", isHasNext()=" + isHasNext() + ", getTotalPage()=" + getTotalPage() + ", getLast()=" + getLast() + "]"; } } 控制层：获取Page传输到jsp页面
// 这是我的搜索例子 @RequestMapping("listProperty") public String list(int cid,Model model,Page page) { Category c = categoryService.get(cid); // 通过分页插件指定分页参数 PageHelper.offsetPage(page.getStart(),page.getCount()); // 查询的数据 List<Property> cs = propertyService.list(cid); // 通过PageInfo获取总数 int total = (int) new PageInfo<>(cs).getTotal(); // 将总页数放进page page.setTotal(total); model.addAttribute("cs", cs); model.addAttribute("c", c); model.addAttribute("page", page); return "listProperty"; } jsp页面：用bootstrap画页面
遍历逻辑处理：
1.当总页数小于等于5页的时候，直接遍历所有分页；
2.当总页数大于5页的时候，
a总页数-当前页大于1页时，先直接遍历前两页，中间用。。。代替，中间显示当前页-1，当前页，当前页+1，后面用。。。
b.当总页数-当前页小于等于1时，先遍历前两页，中间同。。。代替，后面显示总页数-2，总页数-1，总页数。
<ul class="pagination" value="${page.currentPage }" style="margin-left: 30%"> <li <c:if test="${!page.hasPreviouse}"> class="disabled"</c:if>><a href="?start=${page.start-page.count}${page.param}"> <span aria-hidden="true">上一页</span> </a></li> <!-- 总页数小于6页时 --> <!-- 直接遍历显示 --> <c:if test="${page.totalPage < 6 }"> <c:forEach begin="0" end="${page.totalPage-1}" varStatus="status"> <li> <a self="${status.index*page.count}" href="?start=${status.index*page.count}${page.param}">${status.count}</a> </li> </c:forEach> </c:if> <!-- 总页数超过5页时 --> <c:if test="${page.totalPage >=6 }"> <!-- 判断当前页数，当前页小于5时，显示前五页 --> <c:if test="${page.currentPage <= 4 }"> <c:forEach begin="0" end="4" varStatus="status"> <li> <a self="${status.index*page.count}" href="?start=${status.index*page.count}${page.param}">${status.count}</a> </li> </c:forEach> </c:if> <!-- 判断当前页数，当前页大于5，总页数 - 当前页小于1时，显示前2页 ，中间用..，遍历当前页前后两数字.--> <c:if test="${page.currentPage > 4 && (page.totalPage - page.currentPage) <= 1 }"> <c:forEach begin="0" end="1" varStatus="status"> <li> <a self="${status.index*page.count}" href="?start=${status.index*page.count}${page.param}">${status.count}</a> </li> </c:forEach> <li><a>...</a><li> <li> <a self="${(page.totalPage-3)*page.count}" href="?start=${(page.totalPage-3)*page.count}${page.param}">${page.totalPage-2}</a> </li> <li> <a self="${(page.totalPage-2)*page.count}" href="?start=${(page.totalPage-2)*page.count}${page.param}">${page.totalPage-1}</a> </li> <li> <a self="${(page.totalPage-1)*page.count}" href="?start=${(page.totalPage-1)*page.count}${page.param}"> <span aria-hidden="true">${page.totalPage}</span></a> </li> </c:if> <!-- 判断当前页数，当前页大于5，总页数 - 当前页大于1时，显示前2页 ，中间用..，遍历当前页前后两数字，后面用。。。.--> <c:if test="${page.currentPage > 4 && (page.totalPage - page.currentPage) > 1 }"> <c:forEach begin="0" end="1" varStatus="status"> <li> <a self="${status.index*page.count}" href="?start=${status.index*page.count}${page.param}">${status.count}</a> </li> </c:forEach> <li><a>...</a><li> <li> <a self="${(page.currentPage-2)*page.count}" href="?start=${(page.currentPage-2)*page.count}${page.param}">${page.currentPage-1 }</a> </li> <li > <a self="${(page.currentPage-1)*page.count}" href="?start=${(page.currentPage-1)*page.count}${page.param}">${page.currentPage }</a> </li> <li> <a self="${(page.currentPage)*page.count}" href="?start=${(page.currentPage)*page.count}${page.param}">${page.currentPage+1 }</a> </li> <li><a>...</a><li> </c:if> </c:if> <li <c:if test="${!page.hasNext}">class="disabled"</c:if>><a href="?start=${page.start+page.count}${page.param}"> <span aria-hidden="true">下一页</span> </a></li> <%-- <li <c:if test="${!page.hasNext}">class="disabled"</c:if>><a href="?start=${page.last}${page.param}"> <span aria-hidden="true">末页</span> </a></li> --%> <li> 共${page.totalPage }页,到第 <input type="text" name="" style="width: 40px;text-align: center;" id="goNum"> 页 <button class="btn btn-default" type="button" id="goBtn">Go!</button> </li> </ul> js
<script> $(function(){ $("ul.pagination li.disabled a").click(function(){ return false; }); // 分页做搜索框搜索跳转 $("#goBtn").click(function(){ var cnum = $("#goNum").val(); var c = (parseInt(cnum)-1)*5; if(cnum!=""){ if(c <= ${page.total}){ window.location.href="?start="+c; }else{ $(this).css("class","display"); } }else{ $(this).css("class","display"); } }); // enter监听事件 $("#goNum").bind("keyup",function(event){ if(event.keyCode=="13"){ $("#goBtn").click(); } }) // 为当前页动态添加样式，self属性为自己设定，为了取到当前页 $("a[self='${(page.currentPage-1)*page.count}']").css("color","red"); }); </script> 文章来源: 用ssm框架分页