分页分页

研究了好几天分页（感觉我好笨......）啥也不说了

上代码，记录一下：

1.entity实体层：

添加了两个类：Post类，PageUtil类。

Post类里封装了帖子的各个属性，PageUtil里封装了有关分页的各个属性

 1 //每页里的记录数
 2 private Integer pageSize;
 3 //总共的记录数
 4 private Integer totalCount;
 5 //总共页数
 6 private Integer totalPage;
 7 //当前页数
 8 private Integer currentPage;
 9 //startIndex在mySql数据库里使用limit查询是的起始数
10 private Integer startIndex;

2.Mapper层：

因为是对Post表进行分页（我对Post查询了两次）

 1 <!-- select语句，用于分页查询，传入一个map（map里有三个，分别是postMenu（帖子所属的主题编号），startIndex（每页起始的帖子编号），pageSize（每页里查询出的帖子数量）） -->
 2   <select id="pagingQuery" resultMap="ResultMapWithBLOBs" parameterType="java.util.Map" >
 3       SELECT <include refid="Base_Column_List" />
 4     FROM
 5     post where post_menu=#{pageMenu}
 6     LIMIT #{startIndex},
 7      #{pageSize}
 8   </select>
 9   <!-- select语句，查询出全部属于传入menuId的帖子集合 -->
10   <select id="postAll" resultMap="ResultMapWithBLOBs" parameterType="java.lang.Integer" >
11       select * from post where post_menu = #{pageMenu}
12   </select>

3.dao层：

PostMapper中定义了两个方法对应mapper.xml里的两条sql语句

1     //定义一个方法pagingQuery传入参数map，传出查询出的帖子的list集合
2     List<Post> pagingQuery(Map map);
3     //查询出全部的post
4     List<Post> postAll(int menuId);

4.service层：

a).IPostService接口

 1 package com.basketball.service;
 2 import java.util.List;
 3 import com.basketball.entity.PageUtil;
 4 import com.basketball.entity.Post;
 5 
 6 public interface IPageUtilService {
 7     //定义一个方法postPagingQuery完成对帖子主页面的分页查询,返回一个查询出的帖子集合
 8     //pageMenu是从前台jsp页面传入的子主题编号，pageUtil是一个PageUtil对象
 9     public List<Post> postPagingQuery(int pageMenu,PageUtil pageUtil);
10     //查询出所有符合主题编号的帖子数量
11     public int postAllListSize(int pageMenu);
12     //通过childMenuId查出一个meun对象(获取子主题名字)
13     public String selectChildMenuName(int menuId);
14     //通过childMenuId查出他所对应的parentMeun的名字(获取板块名字)
15     public String selectParentMenuName(int menuId);
16 
17 }

b).PostService实现类：

 1     @Autowired
 2     private PostMapper postMapper;
 3     @Autowired
 4     private MenuMapper menuMapper;
 5     
 6     @Override
 7     public List<Post> postPagingQuery(int pageMenu, PageUtil pageUtil) {
 8         // TODO Auto-generated method stub
 9         //startIndex分页里的起始数
10         pageUtil.setStartIndex((pageUtil.getCurrentPage()-1)*pageUtil.getPageSize());
11         //int startIndex = ((pageUtil.getCurrentPage()-1)*pageUtil.getPageSize());
12         //向分页查询方法里传入map
13         Map<String,Object> postPagingMap = new HashMap<String,Object>();
14         postPagingMap.put("pageMenu", pageMenu);
15         postPagingMap.put("startIndex", pageUtil.getStartIndex());
16         postPagingMap.put("pageSize", pageUtil.getPageSize());
17         //调用PostMapper.java里的pagingQuery方法调用PostMapper.xml里的分页查询sql。
18         List<Post> postList = postMapper.pagingQuery(postPagingMap);
19         return postList;
20     }
21     //通过传入的menuId查出所有符合条件的post,查出到底有多少条post
22     public int postAllListSize(int pageMenu){
23         
24         List<Post> postAllList = postMapper.postAll(pageMenu);
25         int postAllNum = postAllList.size();
26         return postAllNum;
27     }

5.controller层：

黄色部分为三目运算符计算总页数

 1 package com.basketball.controller;
 2 
 3 import java.util.List;
 4 
 5 import javax.servlet.http.HttpServletRequest;
 6 
 7 import org.apache.commons.lang.StringUtils;
 8 import org.apache.log4j.Logger;
 9 import org.springframework.beans.factory.annotation.Autowired;
10 import org.springframework.stereotype.Controller;
11 import org.springframework.ui.ModelMap;
12 import org.springframework.web.bind.annotation.RequestMapping;
13 import org.springframework.web.bind.annotation.RequestParam;
14 
15 import com.basketball.dao.MenuMapper;
16 import com.basketball.entity.PageUtil;
17 import com.basketball.service.ILoginService;
18 import com.basketball.service.IPageUtilService;
19 
20 @Controller
21 public class PostPagingController {
22     
23     //定义一个日志用来调用常量
24     private static Logger LOGGER = Logger.getLogger(LoginController.class);
25     private static final String MAINSHOW="mainshow";
26     private static final String TIEZI="tiezi";
27     @Autowired
28     private IPageUtilService pageUtilService;
29     
30     //小功能先不管了
31     //totalPage = totalCount%pageSize==0?totalCount/pageSize:(totalCount/pageSize+1)
32     //接收currentPage（当前页）
33     //通过ajax方法接收index.jsp传回的menuId,currentPage也通过ajax传入
34     //第一次调用该方法时，并没有从页面里传入currentPage，此时的currentPage默认为一，只传入了menuId
35     //当在tiezi.jsp页面里点击分页的跳转按钮是同过tiezi.jsp里的方法调用ajax方法向showPost.do方法里传入menuId以及currentPage（此时才传入了两个值）
36     @RequestMapping("/showPost")
37     public String showPost(@RequestParam(required =false)Integer menuId,@RequestParam(required =false) Integer currentPage,ModelMap model){
38         //如果currentPage没有传值则默认唯一
39         if(currentPage ==null){
40             currentPage = 1;
41         }
42         //没有想好如何判断int类型参数是否为空，无法打印日志
43         PageUtil pageUtil = new PageUtil();
44         pageUtil.setCurrentPage(currentPage);
45         pageUtil.setPageSize(10);
46         //调用pageUtilService实现类里的postPagingQuery方法查出帖子集合
47         List postPageList = pageUtilService.postPagingQuery(menuId, pageUtil);
48         //帖子总条数
49         int postAllNum = pageUtilService.postAllListSize(menuId);
50         pageUtil.setTotalCount(postAllNum);
51         //总共页数
52         int totalPage = pageUtil.getTotalCount()%pageUtil.getPageSize()==0?pageUtil.getTotalCount()/pageUtil.getPageSize():(pageUtil.getTotalCount()/pageUtil.getPageSize()+1);
53         pageUtil.setTotalPage(totalPage);
54         //查出parentMenuName以及childMenuName
55         String childMenuName = pageUtilService.selectChildMenuName(menuId);
56         String parentMenuName = pageUtilService.selectParentMenuName(menuId);
57         
58         model.addAttribute("postPageList", postPageList);
59         model.addAttribute("pageUtil", pageUtil);
60         model.addAttribute("menuId", menuId);
61         model.addAttribute("childMenuName", childMenuName);
62         model.addAttribute("parentMenuName", parentMenuName);
63         
64         
65         return TIEZI;
66     }
67     
68     
69 
70 }

6.前台jsp部分（花了我大量时间啊！）：

a).帖子与分页部分的div：

 1 <!-- 展示帖子的主题内容div。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 -->
 2 <div class="message-list-container">
 3     <div class="message-list" id="message-list">
 4         <c:forEach items="${postPageList}" var="post_List">
 5             <!-- 帖子内容。。。。。。。。。加入jstl。foreach循环遍历输出查询出的帖子集合。。。。 -->
 6             <div class="message-item">
 7 
 8                 <i class="message-star icon-star-empty light-grey"></i>
 9                 <span class="sender" title="Philip Markov">${post_List.postUsername}</span>
10                 <span class="time">${post_List.postTime}</span>
11 
12                 <span class="attachment">
13                     <i class="icon-paper-clip"></i>
14                 </span>
15                 <span class="summary">
16                     <span class="badge badge-success mail-tag"></span>
17                 <span class="text">
18                     ${post_List.postName}
19                 </span>
20                 </span>
21             </div>
22         </c:forEach>
23     </div>
24 </div>
25 <!-- /.message-list-container -->
26 <!--放置分页插件的div。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。  -->
27 <div class="message-footer clearfix">
28     <div class="pull-left">共: ${pageUtil.totalCount}条 </div>
29 
30     <div class="pull-right">
31         <div class="inline middle" ho="${pageUtil.totalPage}" id="zys"> ${pageUtil.currentPage} /${pageUtil.totalPage} 当前页数/总页数</div>
32 
33         &nbsp; &nbsp;
34         <ul class="pagination middle">
35 
36             <li>
37                 <!-- 首页。。。。。。。。。。。。。。。。。。。。。。 -->
38                 <a href="#">
39                     <i class="icon-step-backward middle" id="first"></i>
40                 </a>
41             </li>
42 
43             <li>
44                 <!-- 上一页......................... -->
45                 <a href="#">
46                     <i class="icon-caret-left bigger-140 middle" id="previousPage"></i>
47                 </a>
48             </li>
49 
50             <li>
51                 <!-- 页数输入框，最大是4位数 ，默认为1，onkeypress用来控制该input只能输入数字-->
52                 <span>
53                     <input value="${pageUtil.currentPage}" id="inputPageNum"  onkeypress="return event.keyCode>=48&&event.keyCode<=57" maxlength="4" type="text"  />
54                 </span>
55             </li>
56 
57             <li>
58                 <!-- 下一页。。。。。。。。。。。。 -->
59                 <a href="#">
60                     <i class="icon-caret-right bigger-140 middle" id="lastPage"></i>
61                 </a>
62             </li>
63 
64             <li>
65                 <!-- 最后一页。.................... -->
66                 <a href="#">
67                     <i class="icon-step-forward middle" id="end"></i>
68                 </a>
69             </li>
70         </ul>
71     </div>
72 </div>

b).前天ajax部分：

index.jsp里有一部分ajax，菜单跳转的ajax

 1 <script src="assets/js/jquery-1.10.2.min.js"></script>
 2 <script type="text/javascript">
 3     $(function() {
 4         $('.childMenu').click(function(){
 5             var url = $(this).attr("hr");
 6             var menuId = $(this).attr("hu");
 7             //调用下面的ajax方法，传入url以及menuId
 8             loadUri(url,menuId);
 9         })
10 
11     });
12     
13     function loadUri(url,menuId) {
14         //通过ajax获取一段html
15         alert("menuId-------------"+menuId);
16         
17         $.ajax({
18             url : url,
19             cache : false,
20             type : 'post',
21             data : {"menuId":menuId},
22             dataType : 'html',
23             error : function() {
24                 alert('请求出错 了')
25             },
26             success : function(data) {
27                 //alert(data);
28                 $('.main-content').html(data);
29 
30             }
31 
32         });
33 
34         //将html放到  .page-content div 里面
35     }
36 </script>

tiezi.jsp里的ajax：

 1         <!-- 用来测试在main-content里传入的页面里使用js是否好用 -->
 2         <script src="assets/js/jquery-1.10.2.min.js"></script>
 3         <script type="text/javascript">
 4         /*定义了一个ajax方法
 5          * 向后台PostPagingController中的showPost.do方法里传入currentPage（当前页）和menuId（主题Id）
 6          * 成功后向css为.main-content的div中从新传入tiezi页
 7          * */
 8         function page(currentPage){
 9             //ajax = currentPage = toPage
10             //success  $('.main-content').html(data);
11             $.ajax({
12                 url : "http://localhost:8080/bask11/showPost.do",
13                 cache : false,
14                 type : 'post',
15                 data : {"currentPage":currentPage,"menuId":'${menuId}'},
16                 error : function(a ,b,c) {
17                     alert('请求出错 了1:'+a)
18                     alert('请求出错 了2:'+b)
19                     alert('请求出错 了3:'+c)
20                 },
21                 success : function(data) {
22                     alert(data);
23                     $('.main-content').html(data);
24     
25                 }
26             });
27         }
28         /*js主方法当点击分页的不同按钮是调用不同的方法
29          * */
30         $(document).ready(function(){
31             //点击我要发帖进行跳转（发帖部分，后面会填入一段ajax）
32             $('#fatie').click(function() {
33                 alert("jagonaow");
34             });
35             
36             //pageUtil.currentPage
37             //pageUtil.totalPage
38             alert('${pageUtil.currentPage}--->'+${pageUtil.currentPage})
39             var currentPage = ${pageUtil.currentPage};
40             var totalPage = ${pageUtil.totalPage}
41             //$('.main-content').html(data);
42             $("#first").click(function(){
43                 if(currentPage==1){
44                     alert('已经是第一页了')    
45                     return;
46                 }
47                 page(1);
48             });
49             $("#previousPage").click(function(){
50                 if(currentPage==1){
51                     alert('已经是第一页了')    
52                     return;
53                 }
54                 page(currentPage-1);
55             });
56             $("#lastPage").click(function(){
57                 if(currentPage==totalPage){
58                     alert('已经是最后一页了')
59                     return;
60                 }
61                 page(currentPage+1);
62             });
63             $("#end").click(function(){
64                 if(currentPage==totalPage){
65                     alert('已经是最后一页了')
66                     return;
67                 }
68                 page(totalPage);    
69             });
70             $('#inputPageNum').keydown(function(e){
71                 if(e.keyCode ==13){
72                     var toPage =  $("#inputPageNum").val();
73                     if(toPage<0 || toPage>totalPage ||  toPage== currentPage){
74                         return;
75                     }
76                     page(toPage);
77                 
78                 }
79             })
80             
81         });
82     </script>

分页基本上就这些了，后台比较好写

思路：

通过两条sql语句分别进行1.分页的查询（利用limit进行查询）2.总帖子的查询（查出所有符合传入的menuId的帖子），ssm通过接口调用sql语句，service里主要查出帖子集合，传入controller，controller接收menuId和currentPage，前台靠ajax传值。

细节看代码......

posted @ 2017-06-02 20:16 燕麦酸奶阅读(297) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

燕麦酸奶

分页分页

公告