文档章节

142.ssm框架 +bootstrap分页

Lucky_Me
 Lucky_Me
发布于 06/19 14:33
字数 970
阅读 56
收藏 1

 

这里有两种方式

                        方式一:自己写分页

                        方式二:使用插件PageHelper (参考:https://blog.csdn.net/qq_33624284/article/details/72828977 )

            

1.自己写分页

1.1 效果

1.2 实现过程

1.2.1  创建分页公共类

//---------------------------1.属性-------------------------------------------------------------------------
    /**
     * 当前页
     */
    private Integer currentPage;
    /**
     * 每页显示条数
     */
    private  Integer pageSize;
    /**
     * 总条数
     */
    private Integer  totalSize;
    /**
     * 总页数
     */
    private Integer totalPage;
    /**
     * 存放数据信息
     */
    private List<T> list;
    /**
     * 商品类别
     */
    private String cid;

1.2.2 前端(请求)

1.2.3 后台

1.2.3.1 controller

1.2.3.2 service

接口

实现类

1.2.3.3 mapper及映射文件

mapper接口

映射文件

1.2.4 展示页面

这里使用bootstrap的分页

<font size="5px">共计为您搜索到:${pb.totalSize }条数据;每页显示:${pb.pageSize }条;共${pb.totalPage }页;当前是第</font>
    <font style="color: red" size="5px">${pb.currentPage }</font><font size="5px">页</font>;
    <!--分页 -->
        <div style="width:380px;margin:0 auto;margin-top:50px;">
            <ul class="pagination" style="text-align:center; margin-top:10px;">
            <!-- 第一页的时候  -->
            <c:if test="${pb.currentPage == 1 }">
                <li class="disabled">
                <!-- href="javascript:void(0)  会使得请求失效 -->
                    <a href="javascript:void(0)" aria-label="Previous">
                        <span aria-hidden="true">&laquo;
                        </span>
                    </a>
                </li>
            </c:if>    
            <!-- 不是第一页的时候 -->
            <c:if test="${pb.currentPage != 1 }">
                <li >
                    <a href="${pageContext.request.contextPath }/manageDepartment.action?currentPage=${pb.currentPage-1 }&pageSize=6" aria-label="Previous">
                        <span aria-hidden="true">&laquo;
                        </span>
                    </a>
                </li>
            </c:if>    
            
            <!--循环 遍历页数  -->
            <c:forEach var="i" begin="1" end="${pb.totalPage }" step="1">
                <!--判断当前页,用于做特效,让用户知道当前在那一页  -->
                <c:if test="${pb.currentPage == i }">
                    <li class="active"><a href="javascript:void(0)">${i }</a></li>
                </c:if>
                <!-- 不是当前页的 没有特效  -->
                <c:if test="${pb.currentPage != i }">
                    <li><a href="${pageContext.request.contextPath }/manageDepartment.action?currentPage=${i }&pageSize=6">${i }</a></li>
                </c:if>
                
            </c:forEach>
            <!-- 最后一页的时候  -->
                <c:if test="${pb.currentPage == pb.totalPage }">
                        <li class="disabled">
                            <!-- href="javascript:void(0)  会使得请求失效 -->
                            <a href="javascript:void(0)" aria-label="Next"><span aria-hidden="true">&raquo;</span></span></a>
                        </li>
                </c:if>        
            <!-- 不是 最后一页的时候  -->
                <c:if test="${pb.currentPage != pb.totalPage }">
                        <li>
                            <!-- href="javascript:void(0)  会使得请求失效 -->
                            <a href="${pageContext.request.contextPath }/manageDepartment.action?currentPage=${pb.currentPage+1 }&pageSize=6" aria-label="Next"><span aria-hidden="true">&raquo;</span></span></a>
                        </li>
                </c:if>        
            </ul>
        </div>
        <!-- 分页结束=======================        -->

2. PageHelper 插件分页

效果

2.1 导入环境

2.1.1 增加PageHelper的jar

    <!-- 14. pagehelper 分页插件 -->
             <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.1.4</version>
        </dependency>

2.1.2 在spring与mybaties整合的xml中配置东西

 <!-- 3.3 配置分页插件 -->
                 <property name="plugins">
                    <array>
                      <bean class="com.github.pagehelper.PageHelper">
                        <property name="properties">
                          <value>
                            dialect=mysql
                            reasonable=true
                          </value>
                        </property>
                      </bean>
                    </array>
                  </property>

2.2 实现过程

2.1 前端请求

HTML

JS

2.2 controller

2.3 service

2.3.1 接口

2.3.2 实现类

2.4 mapper接口及映射文件

2.4.1 接口

2.4.2 映射文件

2.5 前端展示(红色圈出的是属性)

    <font size="5px">共计为您搜索到:${pb.total }条数据;每页显示:${pb.pageSize }条;共${pb.pages }页;当前是第</font>
    <font style="color: red" size="5px">${pb.pageNum}</font><font size="5px">页</font>;
    <!--分页 -->
        <div style="width:380px;margin:0 auto;margin-top:50px;">
            <ul class="pagination" style="text-align:center; margin-top:10px;">
            <!-- 第一页的时候  -->
            <c:if test="${pb.pageNum == 1 }">
                <li class="disabled">
                <!-- href="javascript:void(0)  会使得请求失效 -->
                    <a href="javascript:void(0)" aria-label="Previous">
                        <span aria-hidden="true">&laquo;
                        </span>
                    </a>
                </li>
            </c:if>    
            <!-- 不是第一页的时候 -->
            <c:if test="${pb.pageNum != 1 }">
                <li >
                    <a href="${pageContext.request.contextPath }/manageJob.action?currentPage=${pb.pageNum-1 }&pageSize=6" aria-label="Previous">
                        <span aria-hidden="true">&laquo;
                        </span>
                    </a>
                </li>
            </c:if>    
            
            <!--循环 遍历页数  -->
            <c:forEach var="i" begin="1" end="${pb.pages }" step="1">
                <!--判断当前页,用于做特效,让用户知道当前在那一页  -->
                <c:if test="${pb.pageNum == i }">
                    <li class="active"><a href="javascript:void(0)">${i }</a></li>
                </c:if>
                <!-- 不是当前页的 没有特效  -->
                <c:if test="${pb.pageNum != i }">
                    <li><a href="${pageContext.request.contextPath }/manageJob.action?currentPage=${i }&pageSize=6">${i }</a></li>
                </c:if>
                
            </c:forEach>
            <!-- 最后一页的时候  -->
                <c:if test="${pb.pageNum == pb.pages }">
                        <li class="disabled">
                            <!-- href="javascript:void(0)  会使得请求失效 -->
                            <a href="javascript:void(0)" aria-label="Next"><span aria-hidden="true">&raquo;</span></span></a>
                        </li>
                </c:if>        
            <!-- 不是 最后一页的时候  -->
                <c:if test="${pb.pageNum != pb.pages }">
                        <li>
                            <!-- href="javascript:void(0)  会使得请求失效 -->
                            <a href="${pageContext.request.contextPath }/manageJob.action?currentPage=${pb.pageNum+1 }&pageSize=6" aria-label="Next"><span aria-hidden="true">&raquo;</span></span></a>
                        </li>
                </c:if>        
            </ul>
        </div>
        <!-- 分页结束=======================        -->

 

 

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
Lucky_Me
粉丝 7
博文 187
码字总数 63468
作品 0
美国
基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往...

walb呀
2017/12/04
0
0
基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非...

walb呀
2017/12/04
0
0
基于Metronic的Bootstrap开发框架经验总结(10)--优化Bootstrap图标管理

在基于Bootstrap开发的项目中,鲜艳颜色的按钮,以及丰富的图表是很吸引人的特点,为了将这个特点发挥到极致,可以利用Bootstrap图标抽取到数据库里面,并在界面中进行管理和使用,这样我们可...

walb呀
2017/12/04
0
0
bootstrap && layui 两种分页的实现

最近做的项目中后台界面用的layui框架,前台界面用的是boostrap框架,这就导致我在做分页的过程中要考虑前台两种分页的动态实现,现在我已经爬出这个坑了,哈哈,给大家分享一下,写的不好的...

爱前端的小白
2017/09/09
0
0
Bootstrap响应式前端框架笔记十一——分页与标签

Bootstrap响应式前端框架笔记十一——分页与标签 在开发搜索结果页、列表页时通常会使用到分页器控件,Bootstrap中提供了方便的类来进行分页器的创建,示例如下: 效果如下: 为li元素添加d...

珲少
2016/12/13
58
0

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部