您的位置:首页 > 编程语言 > Java开发

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异步更好了。。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  mybatis springmvc 分页