您的位置:首页 > Web前端 > BootStrap

mybatis分页插件使用案例(前端bootstrap)

2017-07-05 10:54 639 查看
1.原因

看了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);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息