文档章节

142.ssm框架 +bootstrap分页

Lucky_Me
 Lucky_Me
发布于 06/19 14:33
字数 970
阅读 70
收藏 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
粉丝 9
博文 206
码字总数 74750
作品 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
在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候,对树列表条件和查询条件的处理

在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和表格展示,而jstree树...

伍华聪
10/22
0
0
bootstrap && layui 两种分页的实现

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

爱前端的小白
2017/09/09
0
0
基于Metronic的Bootstrap开发框架经验总结(10)--优化Bootstrap图标管理

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

walb呀
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【Flutter教程】从零构建电商应用(一)

在这个系列中,我们将学习如何使用google的移动开发框架flutter创建一个电商应用。本文是flutter框架系列教程的第一部分,将学习如何安装Flutter开发环境并创建第一个Flutter应用,并学习Flu...

笔阁
31分钟前
5
0
什么是以太坊DAO?(三)

Decentralized Autonomous Organization,简称DAO,以太坊中重要的概念。一般翻译为去中心化的自治组织。 投票支付合约的所有费用和行动需要时间,并要求用户始终保持活跃,知情和专注。另一...

geek12345
33分钟前
2
0
一个本科学生对Linux的认知

一个本科学生对Linux的认知 我是一名大三的普通一本大学的软件工程的一名学生,学校开设了一些关于系统开发的课程,纸上得来终觉浅,学校的课程课时较短,想要在56个课时之内学会一些公司需要...

linuxCool
今天
3
0
CentOS 安装Tomcat

Tomcat 介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 Java 程序写的网站用tomcat+jdk来运...

野雪球
今天
1
0
OSChina 周四乱弹 —— 每天都迟到是种什么样的体验

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @开源中国首席机器人 :《Too Good At Goodbyes (Acoustic) - Sam Smith - 单曲》 《Too Good At Goodbyes (Acoustic) - Sam Smith - 单曲》 ...

小小编辑
今天
1K
14

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部