springmvc + myBatis + boostrap技术下简单实现的前后端分页功能
2018-02-23 23:04
916 查看
分页cms中一项必要的功能,文本基于springmvc + myBatis + boostrap的前后端分页实现。
分页实现包括后端数据读取和前端分页组件参数设置。
一、前端实现
前端使用:bootstrapPaginator组件
需要需要导入一些css、js
1 <link href="/static/css/bootstrap.min.css" rel="stylesheet">
2 <script src="/static/js/jquery-2.1.1.min.js"></script>
3 <script src="/static/js/bootstrap.min.js"></script>
4 <script src="/static/js/bootstrap-paginator.js"></script>
页面布局代码:
<!-- 分页 -->
<div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>
<!-- 分页 -->
js代码:
/*
* 从session中取出pageNum pages 用于初始化分页组件
*/
var pageNum ="<%=session.getAttribute("pageNum")%>";
var pages = "<%=session.getAttribute("pages")%>";
$('#pageLimit').bootstrapPaginator({
currentPage: pageNum, //当前的请求页面,从服务器获取
totalPages: pages, //一共多少页,从服务器获取
size:"normal", //字体等大小。
bootstrapMajorVersion: 3, //bootstrap的版本要求。
alignment:"right",
numberOfPages:20, //一页列出多少条数据。你自己设定这个值
itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
switch (type) {
case "first": return "首页";
case "prev": return "上一页";
case "next": return "下一页";
case "last": return "末页";
case "page": return page;
}
},
//点击分页按钮是响应函数
//page变量为当前点击的页上的数字。
onPageClicked: function (event, originalEvent, type, page){//page变量为当前点击的页上的数字。
window.location.href='/bssz/infor/list/1/'+ page; //向服务器端请求数据,没有使用ajax。
}//onPageClicked
});
onPageClicked函数功能是当点击分页数字时怎样去响应,这里通过window.location.href向服务器端再次请求数据。在地址设置1个关键参数:【page】,page的值是点击分页后作为参数传入的数字。当点击【上一页】【首页】等时,你也不要担心这个数字bootstrapPaginator会自动计算出来的。
小结:对于bootstrapPaginator组件需要从服务器传入【当前分页码 pageNum】和总页数【pages】两个变量。通过页面跳转向服务器端提交希望显示的【分页数序号】。
二、后端实现
mybatis+pagehelper
导入mybatis-3.2.2.jar、pagehelper-3.2.1.jar以及相关依赖包。
pagehelper在mybatis执行过程中获取分页信息如:
Page{pageNum=1, pageSize=20, startRow=0, endRow=20, total=21, pages=2}
它的使用方法非常简单,参考如下代码:
SqlSession session = MyBatisDB.getSession();
PageHelper.startPage(6, 20, true);
//其中参数:6是前端请求的页面序号,即onPageClicked函数中的【page】,20是每页包含20条记录pageSize
List<Infor> listAll = session.selectList("你的mybatis.UserMapper.listAllNews");
//类型转换后就可以得到分页的所有数据
Page<Infor> pInfor = (Page<Infor>)listAll;
long total = pInfor.getTotal();
long pages = pInfor.getPages();
long pageSie = pInfor.getPageSize();
long pageNum = pInfor.getPageNum();
int startRow = pInfor.getStartRow();
int endRow = pInfor.getEndRow();
在本案例中,我将listAll、pageNum和pages保存到session中,在jsp页面中取出listAll中数据显示数据库内容,使用pageNum数据初始化bootstrapPaginator。
我的参考代码如下:
@Controller
@RequestMapping(value="/infor")
public class InforController {
@RequestMapping(value="/list/{type}/{pageNum}")
public String listPage(HttpServletRequest request, HttpSession session, @PathVariable String type, @PathVariable String pageNum){
SqlSession session = MyBatisDB.getSession();
PageHelper.startPage(pageNum, 20);//20数字与前端【 numberOfPages:20,】要一致。
List<Infor> listAll = session.selectList("你的mybatis.UserMapper.listAllNews");
Page<Infor> pageBean = (Page<Infor>)listAll;
//保存到session
session.setAttribute("pageBean", pageBean);
session.setAttribute("pageNum", pageBean.getPageNum());
session.setAttribute("pages", pageBean.getPages());
。。。。。。。。。。。。。。。。。。。。。。。
}
这样就利用已有组件实现了分页效果。
当然,你使用ajax异步更好了。。
分页实现包括后端数据读取和前端分页组件参数设置。
一、前端实现
前端使用:bootstrapPaginator组件
需要需要导入一些css、js
1 <link href="/static/css/bootstrap.min.css" rel="stylesheet">
2 <script src="/static/js/jquery-2.1.1.min.js"></script>
3 <script src="/static/js/bootstrap.min.js"></script>
4 <script src="/static/js/bootstrap-paginator.js"></script>
页面布局代码:
<!-- 分页 -->
<div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>
<!-- 分页 -->
js代码:
/*
* 从session中取出pageNum pages 用于初始化分页组件
*/
var pageNum ="<%=session.getAttribute("pageNum")%>";
var pages = "<%=session.getAttribute("pages")%>";
$('#pageLimit').bootstrapPaginator({
currentPage: pageNum, //当前的请求页面,从服务器获取
totalPages: pages, //一共多少页,从服务器获取
size:"normal", //字体等大小。
bootstrapMajorVersion: 3, //bootstrap的版本要求。
alignment:"right",
numberOfPages:20, //一页列出多少条数据。你自己设定这个值
itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
switch (type) {
case "first": return "首页";
case "prev": return "上一页";
case "next": return "下一页";
case "last": return "末页";
case "page": return page;
}
},
//点击分页按钮是响应函数
//page变量为当前点击的页上的数字。
onPageClicked: function (event, originalEvent, type, page){//page变量为当前点击的页上的数字。
window.location.href='/bssz/infor/list/1/'+ page; //向服务器端请求数据,没有使用ajax。
}//onPageClicked
});
onPageClicked函数功能是当点击分页数字时怎样去响应,这里通过window.location.href向服务器端再次请求数据。在地址设置1个关键参数:【page】,page的值是点击分页后作为参数传入的数字。当点击【上一页】【首页】等时,你也不要担心这个数字bootstrapPaginator会自动计算出来的。
小结:对于bootstrapPaginator组件需要从服务器传入【当前分页码 pageNum】和总页数【pages】两个变量。通过页面跳转向服务器端提交希望显示的【分页数序号】。
二、后端实现
mybatis+pagehelper
导入mybatis-3.2.2.jar、pagehelper-3.2.1.jar以及相关依赖包。
pagehelper在mybatis执行过程中获取分页信息如:
Page{pageNum=1, pageSize=20, startRow=0, endRow=20, total=21, pages=2}
它的使用方法非常简单,参考如下代码:
SqlSession session = MyBatisDB.getSession();
PageHelper.startPage(6, 20, true);
//其中参数:6是前端请求的页面序号,即onPageClicked函数中的【page】,20是每页包含20条记录pageSize
List<Infor> listAll = session.selectList("你的mybatis.UserMapper.listAllNews");
//类型转换后就可以得到分页的所有数据
Page<Infor> pInfor = (Page<Infor>)listAll;
long total = pInfor.getTotal();
long pages = pInfor.getPages();
long pageSie = pInfor.getPageSize();
long pageNum = pInfor.getPageNum();
int startRow = pInfor.getStartRow();
int endRow = pInfor.getEndRow();
在本案例中,我将listAll、pageNum和pages保存到session中,在jsp页面中取出listAll中数据显示数据库内容,使用pageNum数据初始化bootstrapPaginator。
我的参考代码如下:
@Controller
@RequestMapping(value="/infor")
public class InforController {
@RequestMapping(value="/list/{type}/{pageNum}")
public String listPage(HttpServletRequest request, HttpSession session, @PathVariable String type, @PathVariable String pageNum){
SqlSession session = MyBatisDB.getSession();
PageHelper.startPage(pageNum, 20);//20数字与前端【 numberOfPages:20,】要一致。
List<Infor> listAll = session.selectList("你的mybatis.UserMapper.listAllNews");
Page<Infor> pageBean = (Page<Infor>)listAll;
//保存到session
session.setAttribute("pageBean", pageBean);
session.setAttribute("pageNum", pageBean.getPageNum());
session.setAttribute("pages", pageBean.getPages());
。。。。。。。。。。。。。。。。。。。。。。。
}
这样就利用已有组件实现了分页效果。
当然,你使用ajax异步更好了。。
相关文章推荐
- springmvc+Mybatis 分页查询的简单实现
- 分页查询简单实现(Freemarker+SpringMVC+Mybatis)
- mybatis+oracle+springMVC实现简单分页
- springmvc+mybatis+sql server实现简单登录功能【转】
- springmvc+mybatis+sql server实现简单登录功能【转】
- springmvc+mybatis+sql server实现简单登录功能
- springmvc+mybatis+sql server实现简单登录功能【转】
- springmvc+mybatis+sql server实现简单登录功能【转】
- springmvc+mybatis+sql server实现简单登录功能
- springmvc+mybatis+sql server实现简单登录功能【转】
- springmvc+mybatis+sql server实现简单登录功能
- Spring MVC+MyBatis+MySQL实现分页功能实例
- springmvc+mybatis+sql server实现简单登录功能【转】
- SpringMVC+POI 实现Excel按模板方式简单导出功能
- Maven + Spring MVC+Mybatis + MySQL +AngularJS + Bootstrap 实现简单微博应用(一)环境搭建
- SpringMVC+Mybatis整合实现简单权限控制系统代码
- MyBatis+springMVC+easyUI (dataGirl)实现分页
- Maven+Mybatis+Spring+SpringMVC实现分页查询(附源码)
- 用Maven整合SpringMVC+Spring+Hibernate 框架,实现简单的插入数据库数据功能