mybatis分页插件使用案例(前端bootstrap)
2017-07-05 10:54
639 查看
1.原因
看了http://blog.csdn.net/u012728960/article/details/50791343这篇文章感觉mybatis分页插件很有用,就转子了,就自己也写了个demo方便日后查看。
2.效果图
3.maven引入和spring配置
maven
spring
4.controller
5.service
6.dao及mapper
dao
mapper
7.view(显示酷炫是因为用了bootstrap)
8.ajax+分页
onclick中的ajaxMethod方法即为调用ajax方法
看了http://blog.csdn.net/u012728960/article/details/50791343这篇文章感觉mybatis分页插件很有用,就转子了,就自己也写了个demo方便日后查看。
2.效果图
3.maven引入和spring配置
maven
<!-- pagehelpers --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>4.1.6</version> </dependency> <dependency> <groupId>com.github.jsqlparser</groupId> <artifactId>jsqlparser</artifactId> <version>0.9.6</version> </dependency>
spring
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource" /> <property name="configLocation" value="classpath:spring-mybatis.xml" /> <property name="mapperLocations" value="classpath:/com/xie/test/dao/*.xml" /> <!-- 分页插件配置 --> <property name="plugins"> <array> <bean class="com.github.pagehelper.PageHelper"> <property name="properties"> <value> dialect=mysql </value> </property> </bean> </array> </property> </bean>
4.controller
package com.xie.test.controller; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; import com.alibaba.fastjson.JSON; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import com.xie.test.service.UserService; import com.xie.test.vo.User; @Controller @RequestMapping("/user") public class UserController { @Autowired public UserService userService; @RequestMapping(value="/getUserList") public ModelAndView getUserList(ModelAndView modelAndView,int pageNum){ int pageSize=2; PageHelper.startPage(pageNum, pageSize);//当前页,页面大小 //紧跟着的第一个select方法会被分页 List<User> listUser=userService.getUser(); PageInfo<User> pageInfo=new PageInfo<User>(listUser); modelAndView.addObject("listUser", listUser); modelAndView.addObject("pageInfo", pageInfo); modelAndView.setViewName("showUser"); return modelAndView; } }
5.service
package com.xie.test.ServiceImpl; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.xie.test.dao.IUserDao; import com.xie.test.service.UserService; import com.xie.test.vo.User; @Service public class UserServcieImpl implements UserService{ @Autowired public IUserDao userDao; public List<User> getUser() { List<User> user=userDao.queryUser(); return user; } }
6.dao及mapper
dao
package com.xie.test.dao; import java.util.List; import com.xie.test.vo.User; public interface IUserDao { /** * 查询全部人员 * @return */ List<User> queryUser(); }
mapper
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.xie.test.dao.IUserDao"> <select id="queryUser" parameterType="com.xie.test.vo.User" resultType="com.xie.test.vo.User"> select t.id as id, t.name as name, t.age as age, t.grade as grade from user t </select> </mapper>
7.view(显示酷炫是因为用了bootstrap)
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>showUser</title> </head> <% pageContext.setAttribute("path", request.getContextPath()); %> <link rel="stylesheet" href="${path }/bootstrap/css/bootstrap.min.css"> <script type="text/javascript" src="${path }/bootstrap/js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="${path }/bootstrap/js/bootstrap.min.js"></script> <body> <div class="cntainer"> <div class="row"> <div class="col-md-12"> <h1>人员列表</h1> </div> </div> <div class="row"> <div class="col-md-12"> <table class="table table-honver"> <tr> <th>id</th> <th>名字</th> <th>年龄</th> <th>级别</th> </tr> <c:forEach items="${listUser}" var="emp"> <tr> <td>${emp.id }</td> <td>${emp.name }</td> <td>${emp.age }</td> <td>${emp.grade }</td> <td><button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-pencil"></span>增加</button></td> <td><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-trash"></span>删除</button></td> </tr> </c:forEach> </table> </div> </div> <!-- 分页 --> <div class="row"> <div class="col-md-6"> 当前${pageInfo.pageNum }页,总共${pageInfo.pages }页,总共${pageInfo.total }条记录 </div> <div class="col-md-6"> <nav aria-lable="Page navigation"> <ul class="pagination"> <li><a href="${path }/user/getUserList.do?pageNum=1">首页</a></li> <c:if test="${pageInfo.hasPreviousPage }"> <li> <a href="${path }/user/getUserList.do?pageNum=${pageInfo.pageNum-1}" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> </c:if> <c:forEach items="${pageInfo.navigatepageNums }" var="page"> <c:if test="${page==pageInfo.pageNum }"> <li class="active"><a href="${path }/user/getUserList.do?pageNum=${page}">${page}</a></li> </c:if> <c:if test="${page!=pageInfo.pageNum }"> <li><a href="${path }/user/getUserList.do?pageNum=${page}">${page}</a></li> </c:if> </c:forEach> <c:if test="${pageInfo.hasNextPage }"> <li> <a href="${path }/user/getUserList.do?pageNum=${pageInfo.pageNum+1 }" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </c:if> <li><a href="${path }/user/getUserList.do?pageNum=${pageInfo.pages}">末页</a></li> </ul> </nav> </div> </div> </div> </body> </html>
8.ajax+分页
onclick中的ajaxMethod方法即为调用ajax方法
//分页测试 function showPage(valueA,valueB){ var str="" str+="<div class='row'>"+ "<div class='col-md-6'>"+ " 当前"+pageInfo.pageNum +"页,总共"+pageInfo.pages +"页,总共"+pageInfo.total+"条记录"+ "</div>"+ "<div class='col-md-6'>"+ "<nav aria-lable='Page navigation'>"+ "<ul class='pagination'>"+ "<li><a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+1+")'>首页</a></li>"; if(pageInfo.hasPreviousPage){ str+="<li>"+ "<a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+(pageInfo.pageNum-1)+")' aria-label='Previous'>"+ "<span aria-hidden='true'>«</span>"+ "</a>"+ "</li>"; } for(var i=1;i<=pageInfo.navigatepageNums.length;i++){ if(i==pageInfo.pageNum){ str+="<li class='active'><a onclick='ajaxMethod("+valueA+","+valueB+","+i+")'>"+i+"</a></li>"; } if(i!=pageInfo.pageNum){ str+="<li><a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+i+")'>"+i+"</a></li>"; } } if(pageInfo.hasNextPage){ str+="<li>"+ "<a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+(pageInfo.pageNum+1)+")' aria-label='Next'>"+ " <span aria-hidden='true'>»</span>"+ "</a></li>"; } str+="<li><a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+pageInfo.pages+")'>末页</a></li>"+ "</ul></nav></div></div>"; $("#xie").html(str); }
相关文章推荐
- mybatis分页插件的使用(电商项目前端动态查询排序)
- mybatis结合bootstrap分页插件的使用
- Mybatis分页插件PageHelper正确的使用方法(网上有2篇不够科学的文章)
- Mybatis分页插件PageHelper正确的使用方法(网上有2篇不够科学的文章)
- Mybatis 的分页插件PageHelper-4.1.1的使用
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- MyBatis分页插件:比PageHelper都要简单,使用很灵活,目前支持Oracle和MySQL
- Mybatis分页插件PageHelper正确的使用方法(网上有2篇不够科学的文章)
- web前端框架中bootstrap学习,并且网页中插件动画插件的使用。
- [后端人员耍前端系列]KnockoutJs篇:使用KnockoutJs+Bootstrap实现分页
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
- Mybatis 使用 PageHelper 插件分页
- 使用abel533大神的mybatis分页插件总结
- MyBatis分页插件的使用——PageHelper
- Bootstrap 分页插件的使用
- Mybatis分页插件-PageHepler的使用
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- Mybatis3 generator的使用附demo 及sqlserver 分页插件
- Mybatis 的分页插件PageHelper-4.1.1的使用
- MyBatis分页插件的使用——PageHelper