您的位置:首页 > 数据库

使用pagehelper分页插件详细教程

2018-02-02 16:14 489 查看
pagehelper是一个简单的实现分页技巧的插件我们要使用这个插件无可避免的需要引用它的jar包,你可以从下面的地址中下载最新版本的 jar 包


1:https://oss.sonatype.org/content/repositories/releases/com/github/pagehelper/pagehelper/

2:http://repo1.maven.org/maven2/com/github/pagehelper/pagehelper/

当然你也可以在maven中添加依赖

<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.0.0(依赖版本号)</version>
</dependency>
</dependencies>

当你依赖或者jar包引用成功后,我们第一步所需要的是在mybatis配置mxl中配置拦截器插件

<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor">
</plugin>
</plugins>

到了这一步我们已经将pagehelper所需配置完成,只需要使用插件即可下面便是控制器使用pagehelper的详细代码

@RequestMapping("list")
public String list(@RequestParam(value="pn",defaultValue="1")Integer pn,Model model){
PageHelper.startPage(pn,6);//第一个参数的意思为:当前页数,第二个参数的意思为:每页显示多少条记录
List<Orders> list=aft.list();//从数据库中获取查询所需的数据,在此之前,你不需要在sql语句中编写分页语句,该插件会在查询时直接将分页语句添加到数据库后
PageInfo page = new PageInfo(list,5);//将查询到的数据储存到pageinfo中
model.addAttribute("pageInfo", page);//将pageinfo储存到模型中并返回到web页面
return "afterSales_list";
}

最后一步便是将pageInfo在页面上获取并且配合html框架完成页面的美化与输出


<%@ 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">
<html>
<head>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
pageContext.setAttribute("jsp", request.getContextPath());
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>售后列表</title>
<link type="text/css" rel="stylesheet" href="${jsp}/static/fontsawesome/css/font-awesome.css"/>
<link type="text/css" rel="stylesheet" href="${jsp}/static/css/datepicker.css"/>
<link type="text/css" rel="stylesheet" href="${jsp}/static/css/style.css"/>
</head>
<body>
<div class="main_box b">
<h2><span></span>售后列表</h2>
<form action="${jsp}/After/where" method="post" id="order_shform">
<div class="search_box clearfix">
<input type="text" class="f_left" name="order_code" placeholder="输入手机号或车牌号查询" style="margin-right:15px;"/>
<select name="service"  style="width:179px" id="service">
<option value="">全部服务</option>
</select>
<input type="submit" value="搜索" class="btn blue_btn"/>
</div>
</form>
<div class="cont_box">
<table border="0" cellspacing="0" cellpadding="0" class="table" id="table_box">
<thead>
<tr>
<th>会员名称</th>
<th>会员手机号</th>
<th>会员车牌号</th>
<th>创建时间</th>
<th>预约的服务</th>
<th>价格</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<c:forEach items="${pageInfo.list}" var="after">
<tr>
<td>${after.afterSaleName}</td>
<td>${after.afterSalePhone}</td>
<td>${after.afterSaleCarphone}</td>
<td>${after.afterSaleTime}</td>
<td>${after.afterSaleServicename}</td>
<td>${after.afterSalePrice}</td>
<td>${after.afterSaleOther}</td>
</tr>
</c:forEach>

</tbody>
</table>
</div>
</div>
<!--javascript include-->
<script src="${jsp}/static/js/jquery-2.2.1.min.js"></script>
<script src="${jsp}/static/js/jquery.dataTables.min.js"></script>
<script src="${jsp}/static/js/bootstrap-datepicker.js"></script>
<script src="${jsp}/static/js/jquery.validate.min.js"></script>
<script src="${jsp}/static/js/other.js"></script>
<script>
$.ajax({
url:"${jsp}/Goods/ajax1",
type:"GET",
date:"",
success:function(result){
$.each(result.returnData.list,function(Xiabiao,emp){
$("<option value="+emp.serviceTypeid+">"+emp.servletTypename+"</option>").appendTo("#service");
})
}
});
</script>
</body>
</html>

以下便是实现分页插件并美化的效果图





内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息