小东Freeman + 关注

签名:我们爱我们的倒霉工作,也爱这千疮百孔的世界。

JSP用C标签控制分页页码

发表于 7个月前   5119次查看    2评论  18 赞

]3WU%VWMCZW7GU[]H2L(VNJ.png

前言:在刚做网站的时候写过一个分页,虽然功能都有,但是真的挺难看的,前段时间一直忙也没怎么做,今天看到了就试着改了下样式和用C标签控制了页码显示,这样一来不光可以改变前端样式,又避免了代码的冗余,代码贴出来,仅供参考


1、后台代码,可能很多同学不理解分页的实现,我就把后台代码也贴出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
//设置初始序号
        int orderNum=0;
        article.setOrderNum(orderNum);
        //查找前十的文章
        List<Article> hotArticle=articleService.findHotArticle(article);
        /*分页*/
        //初始页码
        int pageNum=1;
        //计算,当传回来的有值时
        String pageNum_1=request.getParameter("pageNum");
        if(pageNum_1!=null){
            pageNum=Integer.parseInt(pageNum_1);
        }
        //每页条数
        int currentPage=10;
        //计算后的开始条数
        int startPage=(pageNum-1)*currentPage;
        //计算总条数
        int totalCount=articleService.findCount(article);
        //计算总页数
        int totalPage;
        if(totalCount%currentPage>0){
             
        totalPage=(totalCount/currentPage)+1;
         
        }else{
            totalPage=totalCount/currentPage;
        }
        //开始页数
        if(pageNum>=6){
            //如果大于6则是当前页数页数减3
            article.setBegin(pageNum-3);
        }else{
            //如果小于6则从一开始
            article.setBegin(1);
        }
        //结束页数
        if(pageNum>6){
            if(totalPage>=pageNum){
            //用switch算结束
            switch(totalPage-pageNum){
            case 0:article.setEnd(pageNum);break;
            case 1:article.setEnd(pageNum+1);break;
            case 2:article.setEnd(pageNum+2);break;
            case 3:article.setEnd(pageNum+3);break;
            default:article.setEnd(pageNum+3);
            }
             
            }else{
                article.setEnd(totalPage);
            }
        }else{
            if(totalPage>6){
                 //用switch算结束
                switch(totalPage-6){
                case 1:article.setEnd(7);
                default:article.setEnd(7);
                }
            }else{
                article.setEnd(totalPage);
            }
        }
        article.setStartPage(startPage);
        article.setTotalCount(totalCount);
        article.setTotalPage(totalPage);
        article.setPageNum(pageNum);
        article.setCurrentPage(currentPage);

核心代码在这里,主要计算开始和结束的页码数,这个算法想了半天,也可以优化代码,使其更适合你的网站

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//开始页数
        if(pageNum>=6){
            //如果大于6则是当前页数页数减3
            article.setBegin(pageNum-3);
        }else{
            //如果小于6则从一开始
            article.setBegin(1);
        }
        //结束页数
        if(pageNum>6){
            if(totalPage>=pageNum){
            //用switch算结束
            switch(totalPage-pageNum){
            case 0:article.setEnd(pageNum);break;
            case 1:article.setEnd(pageNum+1);break;
            case 2:article.setEnd(pageNum+2);break;
            case 3:article.setEnd(pageNum+3);break;
            default:article.setEnd(pageNum+3);
            }
             
            }else{
                article.setEnd(totalPage);
            }
        }else{
            if(totalPage>6){
                 //用switch算结束
                switch(totalPage-6){
                case 1:article.setEnd(7);
                default:article.setEnd(7);
                }
            }else{
                article.setEnd(totalPage);
            }
        }

2、前端jsp代码,分页美化代码就不贴了,你们按照自己喜欢的样式做就OK了,为了方便大家,我把注释都写上了,所以代码有点乱,去掉就好多了,中心思想就是用foreach控制页码的显示,用begin和end,已经在后台获取到,控制开始和结束,如果觉得网上的插件用不明白,这不失为一种方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 <!-- 新分页 -->
       <div style="text-align:center">    
  <ul class="pagination " style="width:440px;">
  <!-- 首页无需遍历 ,直接指向首页-->
<li><a  href="${pageContext.request.contextPath }/allArt">首</a></li>   
<!-- 遍历开始,从一开始,结束到总页数,这些都从后台获取 -->
<!-- ${article.begin }是指永远只保留6个页码,用总页码减5,如果不够六页则从一开始 -->  
<!-- ${article.begin}已经从后台计算完传到前台 -->
<c:forEach  begin="${article.begin}"  end="${article.end}" varStatus="st">
     <!-- 如果当前数字等于当前页数修改class为active,高亮显示 -->
     <c:if test="${st.index==article.pageNum }">
       <li class="active">
          <a href="${pageContext.request.contextPath }/ArtPage/${st.index }" >${st.index }</a>
          </li
      </c:if>
       
      <!-- 否则不高亮显示 -->
      <c:if test="${st.index !=article.pageNum }">   
      <li>
     <a href="${pageContext.request.contextPath }/ArtPage/${st.index }">${st.index }</a>
     </li>
     </c:if>
     <!-- 遍历结束 -->
    </c:forEach>
    <!-- 尾页无须遍历直接填入总页数 -->
     <li><a  href="${pageContext.request.contextPath }/ArtPage/${article.totalPage }">尾</a></li>
     </ul
</div
<!-- 分页结束 -->

这样一看也挺简单的,用了几个小时想出来的,希望可以帮到大家,谢谢

18人已赞


本文由Fun言网 – 小东Freeman创作,转载请务必附上本文链接和出处,欢迎参与我们的付费投稿计划


你还没有登录,请先 登录注册!
文章评论2