文档章节

ssm框架 +bootstrap分页

Lucky_Me
 Lucky_Me
发布于 06/19 14:33
字数 915
阅读 36
收藏 1
点赞 0
评论 0

 

这里有两种方式

                        方式一:自己写分页

                        方式二:使用插件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
粉丝 6
博文 157
码字总数 46317
作品 0
美国
shenzhanwang/SSM

SSM SpringMVC,Mybatis,Spring三大框架的整合总是很麻烦,在此提供一个已经整合好三大框架的包,可以直接下载导入Myeclipse使用,项目基于Maven做依赖管理。项目基于Mysql自带的Sakila数据库...

shenzhanwang
2016/11/16
0
0
LeeCX - 开源后台管理系统简单介绍

我们在github上开源了一个后台管理系统,使用了前端css框架并且简单的封装了一下,技术的将会不间断更新,详细可以点击原文链接。具体介绍如下: LeeCX 开源后台管理系统,前端基于bootstrap...

风间影月
2017/09/20
0
0
bootstrap分页问题

就是现在我用了SSM框架做的数据报表,报表是用boostrap的。就是我再查数据的时候,后台是查了所有的数据然后填充到报表里面生成页数的。现在我是想这样,比如一页放一百条数据,那我点击第一...

小绝绝
2017/06/07
79
1
基于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
SpringMVC3.0+MyIbatis3.0(分页示例)【转】

主要使用Oracle的三层sql实现分页! 一 环境:XP3+Oracle10g+MyEclipse6+(Tomcat)+JDK1.5 二 工程相关图片: 1 DEMO图片 2 工程代码图片 3 相关jar包图片 三 此示例是在: SSI:SpringMVC3+Mybati...

如何让他和
2016/09/23
44
1
bootstrap && layui 两种分页的实现

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

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

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

珲少
2016/12/13
58
0
小林攻城狮/dp-PRO

dp-PRO 基于SSM框架的权限管理系统,支持操作权限和数据权限,后端采用Spring、SpringMVC、Mybatis、Shiro,前端采用adminLTE、vue.js、bootstrap-table、tree-grid、layer,对前后端进行封装...

小林攻城狮
2017/09/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud Gateway 接口文档聚合实现

在微服务架构下,通常每个微服务都会使用Swagger来管理我们的接口文档,当微服务越来越多,接口查找管理无形中要浪费我们不少时间,毕竟懒是程序员的美德。 由于swagger2暂时不支持webflux 走...

冷冷gg
16分钟前
10
0
流利阅读笔记30-20180719待学习

1.今日导读 2.带着问题听讲解 3.新闻正文(中英文对照) 4.重点词汇 5.拓展内容

aibinxiao
18分钟前
1
0
OSChina 周五乱弹 —— 我们是食物链的最底层

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @温家成 :分享谢安琪的单曲《姿色份子》 《姿色份子》- 谢安琪 手机党少年们想听歌,请使劲儿戳(这里) @贪吃飒:最近p2p怎么了、半个月爆了...

小小编辑
32分钟前
6
1
Android Studio 3.0 之后打包apk出现应用未安装问题

1、废话 出现这个问题的原因,并不是只有一个,而是有多个原因,不懂的估计会被搞得一头雾水,下面我列举的是我遇到的几种问题和网友遇到的几种问题,但不一定是全部,也有可能有些莫名其妙的...

她叫我小渝
51分钟前
0
0
前端基础

1. get请求传参长度的误区 误区:我们经常说get请求参数的大小存在限制,而post请求的参数大小是无限制的。 实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是...

wenxingjun
今天
0
0
拦截SQLSERVER的SSL加密通道替换传输过程中的用户名密码实现运维审计(一)

工作准备 •一台SQLSERVER 2005/SQLSERVER 2008服务 •SQLSERVER jdbc驱动程序 •Java开发环境eclipse + jdk1.8 •java反编译工具JD-Core 反编译JDBC分析SQLSERVER客户端与服务器通信原理 SQ...

紅顏為君笑
今天
9
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
今天
0
0
linux mint 1.9 qq 安装

转: https://www.jianshu.com/p/cdc3d03c144d 1. 下载 qq 轻聊版,可在百度搜索后下载 QQ7.9Light.exe 2. 去wine的官网(https://wiki.winehq.org/Ubuntu) 安装 wine . 提醒网页可以切换成中...

Canaan_
今天
0
0
PHP后台运行命令并管理运行程序

php后台运行命令并管理后台运行程序 class ProcessModel{ private $pid; private $command; private $resultToFile = ''; public function __construct($cl=false){......

colin_86
今天
1
0
数据结构与算法4

在此程序中,HighArray类中的find()方法用数据项的值作为参数传递,它的返回值决定是否找到此数据项。 insert()方法向数组下一个空位置放置一个新的数据项。一个名为nElems的字段跟踪记录着...

沉迷于编程的小菜菜
今天
1
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部