mybatis-paginator插件学习笔记
效果图 :
mybatis-paginator下载地址：https://github.com/miemiedev/mybatis-paginator
使用示例：https://my.oschina.net/miemiedev/blog/135516
后台: ssm + mybatis-paginator插件
package com.controller; import java.util.*; @Controller @RequestMapping("/user") public class UserController{ @Autowired private UserService userSer; //获取全部用户 @RequestMapping(value="userList") private ModelAndView userList(ModelAndView modelAndView){ PageBounds pageBounds = new PageBounds(1, 6); //默认显示前6条 Map<String, Object> userParam = new HashMap<>(); PageList<UserInf> userList = userSer.findUsers(userParam, pageBounds); int pageNum = userList.getPaginator().getTotalPages(); //总页码数 modelAndView.addObject("pageNum", pageNum); modelAndView.addObject("userList", userList); modelAndView.setViewName("userList"); return modelAndView; } //获取符合条件的用户 @RequestMapping(value="userListPage",produces = "text/html; charset=utf-8") //此处设置produces防止数据返回到前台时中文乱码 //Spring对返回值映射时找不到对应的视图，所以返回404; 需要用@RequestBody private @ResponseBody String findUsers(Integer page, Integer pageSize){ String sortString = "user_id.asc"; Map<String, Object> userParam = new HashMap<>(); //userParam.put("email", ""); if(page == null) page = 1; if(pageSize == null) pageSize = 6; PageBounds pageBounds = new PageBounds(page, pageSize, Order.formString(sortString)); PageList<UserInf> userList = userSer.findUsers(userParam, pageBounds); int pageNum = userList.getPaginator().getTotalPages(); String res = JSONArray.fromObject(userList).element(userList.size(), "{pageNum:"+pageNum+"}").toString(); return res; } }
Service接口：
import java.util.*;
import com.github.miemiedev.mybatis.paginator.domain.PageBounds;
import com.github.miemiedev.mybatis.paginator.domain.PageList;
import com.po.UserInf;
public abstract class UserService {
//多个用户查询
public abstract PageList<UserInf> findUsers(Map<String, Object> email, PageBounds pageBounds);
}
mapper 中自定义的sql查询语句：
<!-- 自定义sql动态查询片段 --> <sql id="selectPage_whereCondition"> <if test="params!=null and params.size()>0"> <if test="params.get('id')!=null"> and user_id = #{params.id} </if> <if test="params.get('name')!=null"> and user_name like concat('%',trim(#{params.name}),'%') </if> <if test="params.get('email')!=null"> and user_email like concat('%',trim(#{params.email}),'%') </if> <if test="params.get('password')!=null"> and user_email like concat('%',trim(#{params.email}),'%') </if> </if> </sql> <!-- 自定义分页查询语句 --> <select id="selectPage" parameterType="map" resultMap="BaseResultMap"> select * from user_inf <where> <include refid="selectPage_whereCondition"></include> </where> </select>
前台 : bootstrapPaginator插件
本项目中略做了修改(384页处)：“首页”，“上一页”，“下一页”，“末页”标签一直显示。当显示页面为第一页时，“上一页”按钮“不可点击”；“下一页”同理。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test for Paginator</title> <link rel="stylesheet" href="../re/JsAndCss/bootstrap.css"> </head> <style> *{ font-family : Sans-serif, 'Helvetica Neue', Helvetica, Arial; } th, td{ text-align : center; } .nice{ color : red; font-size : 30px; background-color : orange; } </style> <body> <div class="container"> <div class="well" style="text-align:center;color:orange;"> <h4>用户信息</h4> </div> <div class="table-responsive"> <table class="table table-striped table-bordered table-hover"> <thead> <tr style="text-align:center"> <th>用户Id</th> <th>用户名</th> <th>用户密码</th> <th>用户邮箱</th> </tr> </thead> <tbody id="mytbody"> <c:forEach items="${userList }" var="user"> <tr style="text-align:center"> <td>${user.userId }</td> <td>${user.userName }</td> <td>${user.userPassword }</td> <td>${user.userEmail }</td> </tr> </c:forEach> </tbody> </table> </div> <div style="text-align:center"> <ul id="myPaginator"></ul> </div> </div> </body> <script type="text/javascript" src="../re/JsAndCss/jquery.min.js"></script> <script type="text/javascript" src="../re/JsAndCss/bootstrap.js"></script> <script type="text/javascript" src="../re/JsAndCss/bootstrap-paginator.js"></script> <script> $("#myPaginator").bootstrapPaginator({ bootstrapMajorVersion : 3, //版本声明 版本为3时父标签须为ul, 版本为2时父标签须为div /* pageUrl : function(type, page, current){ //超链接 return "userListPage.action?page="+page+"&pageSize=6"; }, */ size : "normal", //控件大小 alignment : "center", //控件对齐方式 itemContainerClass : function(type, page, current){ //设置ul的class(名) var res = ""; switch (type) { case "prev": if(current == 1) res = "disabled"; break; case "next": if(current == this.totalPages) res = "disabled"; break; case "page": if(page == current) res = "active"; break; } return res; }, itemContentClass : function(type, page, current){ //设置li的class }, currentPage : 1, //当前页 numberOfPages : 5, //控件显示的页码数 totalPages : '${pageNum}', //总页数 shouldShowPage : true, //或为function(type,page,current){return "true"}; itemTexts : function (type, page, current){ switch(type){ case "first": return "首页"; case "prev": return "上一页"; case "next": return "下一页"; case "last": return "末页"; case "page": return page; } }, tooltipTitles : function(type, page, current){ //提示信息 if(type=="page" && page == current){ return "正在展示第" + current + "页"; } switch(type){ case "first": return "跳至首页"; case "prev": return "跳至上一页"; case "next": return "跳至下一页"; case "last": return "跳至尾页"; case "page": return "跳至第"+page+"页"; } }, useBootstrapTooltip : true, //是否使用bootstrap内置tooltip bootstrapTooltipOptions : { animation : true, html : false, placement : "bottom", trigger : 'hover', //如何触发提示工具 触发器用空格分隔 delay : { show : 0, hide : 0} }, onPageClicked : function (event, originalEvent, type, page){ //点击按钮 var pages = $(this).bootstrapPaginator('getPages'); var current = pages.current; //当前页页码,即点击事件发生时所在页面 var last = pages.last; //最后一页页码 if(type=='prev'&¤t==1) return; if(type=='next'&¤t==last) return; $.ajax({ type : 'post', url : '../user/userListPage.action', data : {page:page, pageSize:6}, dataType : 'json', success : function(mes){ $('#mytbody').empty(); for(var key in mes){ var res = mes[key]; if(res.pageNum!=null){ //$('#myPaginator').bootstrapPaginator('setOptions', {totalPages : res.pageNum}); return; } $('#mytbody').append('<tr><td>'+res.userId+'</td><td>'+res.userName +'</td><td>'+res.userPassword+'</td><td>'+res.userEmail+'</td></tr>'); } }, }); }, onPageChanged : function (event){ //页码改变后触发 } }); </script> </html>
项目下载地址：https://files.cnblogs.com/files/don1911/testForPaginator.zip
