sunny123456

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

java分页的实现,插件PageHelper的使用及原理
https://blog.csdn.net/qq_25498677/article/details/69675664

如果你只希望知道PageHelper的用法,直接去github查看官网文档 Mybatis-PageHelper.

 

1.关于分页。

web项目中,分页是一个常见的功能。在我刚学完javaweb的时候在没有用任何框架的情况下做过分页,代码非常的冗余、难看,后台每个POJO类的增删改查里都需要写:(pageSize为每页大小,pageNum为查询的页数)

 

  1. getList(int pageSize,int pageNum);
  2. getTotal();

 

而前端也要写多个jsp,一个分页就对应了一个jsp。导致不管是前后台,代码都大量重复,实在是太不优雅了。

 

2.PageHelper的优缺点。

PageHelper做的是什么呢?它封装了分页的后台部分,说得更简单点,就是你不需要每个POJO类的增删改查里都包括那两个方法了,它帮你做了。你只需要有一个selectAll的方法,它会根据你使用的数据库来将你selectAll的sql改装成一个分页查询的sql,并顺带生成一个查询总数的sql。

如图,对应不同的数据库有不同的方言,如常见的Mysql,分页关键字是limit,它就是这样组装你的sql。

 

  1. @Override
  2. public String getPageSql(String sql, Page page, CacheKey pageKey) {
  3. StringBuilder sqlBuilder = new StringBuilder(sql.length() + 14);
  4. sqlBuilder.append(sql);
  5. if (page.getStartRow() == 0) {
  6. sqlBuilder.append(" LIMIT ");
  7. sqlBuilder.append(page.getPageSize());
  8. } else {
  9. sqlBuilder.append(" LIMIT ");
  10. sqlBuilder.append(page.getStartRow());
  11. sqlBuilder.append(",");
  12. sqlBuilder.append(page.getPageSize());
  13. pageKey.update(page.getStartRow());
  14. }
  15. pageKey.update(page.getPageSize());
  16. return sqlBuilder.toString();
  17. }

 

 

 

PageHelper不仅帮你分页查询了数据,在返回时直接返回Page对象,里更是封装了许多分页信息。但是在前后台json数据交互时,由于Page对象继承自ArrayList,json不会保留其分页信息,所以在使用时往往是这样使用的:

 

  1. @Override
  2. public PageInfo<TopicPost> selectAllPublicTopicPost(int pageNum) {
  3. int pageSize = 10;
  4. PageInfo<TopicPost> topicPostList = new PageInfo<TopicPost>();//主题帖表
  5. try {
  6. PageHelper.startPage(pageNum, pageSize);
  7. topicPostList = ((Page<TopicPost>)topicPostDao.daoSelectAllPublicTopicPost()).toPageInfo();
  8. } catch (Exception e) {
  9. log.error("查询状态正常的主题帖失败!"+e.toString());
  10. e.printStackTrace();
  11. }
  12. return topicPostList;
  13. }


即将查询出来的Page转为PageInfo(没有继承ArrayList),将你的PageInfo<Object>返回给前台就可以了。

 

 

至此,我们可以看到PageHelper的优缺点。

优点:封装分页sql,使我们不需要每个地方都去写分页的查询语句;同时,使我们select的sql语句向下兼容,换了数据库也不需要更改sql代码;

缺点:自带的Page对象转json时会丢失分页数据;而转为PageInfo对象时分页信息过多(这一点作者已在github上说明,建议自己实现PageInfo)

 

3.前端的实现。

在拿到后台传来的数据后,前端要做的要不少。考虑一个这样的分页: 

<<  <  1  2  3  4  5  >  >>   难点在中间的五个数字,通常情况下PageNum(当前你浏览的页数)在中间,每当翻页时五个数字都会发生变化,但如果总页数较小或者PageNum较小时则不一定发生变动,同时还需要注意总页数小于5的问题。

<< 为到第一页

<   为上一页

 firstNum 通常为PageNum - 2

 secondNum 通常为PageNum - 1

 thirdNum 通常为PageNum

 fourthNum 通常为PageNum + 1

 fifthNum 通常为PageNum + 2

>   为下一页

>>为最后一页

直接看代码:

 

  1. //查看所有状态正常的主题帖
  2. function selectAllPublicTopicPost(pageNum){
  3. var url = "/guestbook/rs/topicpost/selectallpublictopicpost";
  4. var json = JSON.stringify(pageNum);
  5. $.ajax({
  6. url:url,
  7. type:'POST',
  8. async:true,
  9. data: json,
  10. contentType:"application/json",
  11. dataType:'json',
  12. success:function(data,textStatus,jqXHR){
  13. var firstNum = pageNum - 2;
  14. var secondNum = pageNum -1;
  15. var thirdNum = pageNum;
  16. var fourthNum = pageNum + 1;
  17. var fifthNum = pageNum + 2;
  18. var prePage = pageNum - 1;
  19. var nextPage = pageNum + 1;
  20. if(pageNum < 4 || data.pages < 6){
  21. firstNum = 1;
  22. secondNum = 2;
  23. thirdNum = 3;
  24. fourthNum = 4;
  25. fifthNum = 5;
  26. }
  27. else if(pageNum > data.pages-2){
  28. firstNum = data.pages-4;
  29. secondNum = data.pages-3;
  30. thirdNum = data.pages-2;
  31. fourthNum = data.pages-1;
  32. fifthNum = data.pages;
  33. }
  34. if(data.isFirstPage){
  35. prePage = 1;
  36. }
  37. if(data.isLastPage ){
  38. nextPage = data.pages;
  39. }
  40. var index_page = "<li><a onclick='selectAllPublicTopicPost(1)' aria-label='Previous'><span aria-hidden='true'><<</span></a></li>"
  41. +"<li><a onclick='selectAllPublicTopicPost("+prePage+")' aria-label='Previous'><span aria-hidden='true'><</span></a></li>"
  42. +"<li><a onclick='selectAllPublicTopicPost("+firstNum+")'>"+firstNum+"</a></li>";
  43. if(secondNum <= data.pages){
  44. index_page = index_page + "<li><a onclick='selectAllPublicTopicPost("+secondNum+")'>"+secondNum+"</a></li>";
  45. }
  46. if(thirdNum <= data.pages){
  47. index_page = index_page + "<li><a onclick='selectAllPublicTopicPost("+thirdNum+")'>"+thirdNum+"</a></li>";
  48. }
  49. if(fourthNum <= data.pages){
  50. index_page = index_page + "<li><a onclick='selectAllPublicTopicPost("+fourthNum+")'>"+fourthNum+"</a></li>";
  51. }
  52. if(fifthNum <= data.pages){
  53. index_page = index_page + "<li><a onclick='selectAllPublicTopicPost("+fifthNum+")'>"+fifthNum+"</a></li>";
  54. }
  55. index_page = index_page +"<li><a onclick='selectAllPublicTopicPost("+nextPage+")' aria-label='Next'><span aria-hidden='true'>></span></a></li>"
  56. +"<li><a onclick='selectAllPublicTopicPost("+data.pages+")' aria-label='Next'><span aria-hidden='true'>>></span></a></li>";
  57. $("#index_page").html(index_page);
  58. //以下内容不重要
  59. var tp = "";
  60. jQuery.each( data.list,function(i,item){
  61. tp = tp + "<div class='col-lg-4'><a href='/guestbook/contents.html?topicPostId="
  62. +item.id
  63. +"' target='_blank'>"
  64. +item.title
  65. +"</a></div><div class='col-lg-2'>"
  66. +item.keyword
  67. +"</div><div class='col-lg-2'>"
  68. +vagueTime(new Date(item.time).toLocaleString())
  69. +"</div><div class='col-lg-2'><a href='/guestbook/cust_info.html?uid="
  70. +item.userId
  71. +"' target='_blank'>"
  72. +item.userName
  73. +"</a></div><div class='col-lg-1'>"
  74. +item.replyNumber
  75. +"<br/><br/></div>";
  76. });
  77. $("#topic_list").html(tp);
  78. }
  79. })
  80. }

这样就是一个完整的分页的前后台实现,但前端依然是每一个分页都要去写这么一大段代码,还有改善空间。

 

 

4.综合解决方案。

后台:采用PageHelper查询出来的Page转为PageInfo,如果需求的查询功能比较简单或者对性能要求高,自己照着PageInfo实现一个MyPageInfo,其中只要自己需要的属性、方法即可。

前端:写一个page.js提供一个getPageArr的方法,对传来的做PageNum做处理,返回一个数组,即firstNum至fifthNum,当然,要注意数据库不到5页的返回哦。这样的话前端也避免了冗余代码。

 

 

 

posted on 2022-03-22 22:06  sunny123456  阅读(786)  评论(0编辑  收藏  举报