1.先上效果图(不怎么好看,主要看功能)
2.实现(Maven项目)
2.1配置pom.xml文件
-
<!-- 物理分页 --> -
<dependency> -
<groupId>com.github.pagehelper</groupId> -
<artifactId>pagehelper</artifactId> -
<version>5.0.0</version> -
</dependency>
2.2配置Pagehelper核心拦截器
-
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean" -
p:dataSource-ref="dataSource" p:mapperLocations="classpath:com/exp/phone/mapping/*.xml"> -
<property name="plugins"> -
<array> -
<bean class="com.github.pagehelper.PageInterceptor"> -
<property name="properties"> -
<value> -
helperDialect=mysql -
supportMethodsArguments=true -
</value> -
</property> -
</bean> -
</array> -
</property> -
</bean> -
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> -
<property name="basePackage" value="com.exp.phone.dao" /> -
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" /> -
</bean> -
<bean id="transactionManager" -
class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> -
<property name="dataSource" ref="dataSource" /> -
</bean>
2.3使用(后端)
-
@RequestMapping("/list") -
public String list(Model model,@RequestParam(value="pageNum", defaultValue="1") int pageNum, -
@RequestParam(value="pageSize", defaultValue="3") int pageSize){ -
PageHelper.startPage(pageNum, pageSize); -
List<User> list = userService.list(new HashMap()); -
PageInfo page = new PageInfo(list); -
model.addAttribute("page",page); -
return "freeMarker"; -
}
2.4使用(前端)
-
<#setting classic_compatible=true> -
<#assign base=request.contextPath /> -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -
<html xmlns="http://www.w3.org/1999/xhtml"> -
<head> -
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -
<title>User List</title> -
<link href=" ${base}/bootstrap/css/bootstrap.min.css" rel="stylesheet"> -
<style> -
li{float: left; list-style: none;margin: 10px;} -
.active{background-color: red} -
</style> -
</head> -
<body> -
<h3>总记录:${page.total}</h3> -
<h3>是否为第一页:${page.isFirstPage}</h3> -
<h3>是否为最后一页:${page.isLastPage}</h3> -
<h3>导航页码数:${page.navigatePages}</h3> -
<h3>导航条上的第一页:${page.navigateFirstPage}</h3> -
<h3>导航条上的最后一页:${page.navigateLastPage}</h3> -
<h3>上一页:${page.prePage}</h3> -
<h3>下一页:${page.nextPage}</h3> -
<h3>总页数:${page.pages}</h3> -
<table border="1" class="table table-striped"> -
<thead> -
<tr> -
<th width="40%">Username</th> -
<th width="30%">Phone</th> -
<th width="30%">Sex</th> -
</tr> -
</thead> -
<tbody> -
<#if page.list??> -
<#list page.list as item> -
<tr> -
<td>${item.username}</td> -
<td>${item.phone}</td> -
<td>${(item.sex == 1)?string("男","女")}</td> -
<tr> -
</#list> -
<#else> -
<p> 抱歉!暂时无数据 </p> -
</#if> -
</tbody> -
</table> -
<div class="message"> -
共<i class="blue">${page.total}</i>条记录,当前显示第 <i -
class="blue">${page.pageNum}/${page.pages}</i> 页 -
</div> -
<div style="text-align:center;"> -
<ul class="pagination"> -
<#if !page.isFirstPage > -
<li><a href="javascript:queryAll(${page.firstPage}, ${page.pageSize});"><<</a></li> -
<li><a href="javascript:queryAll(${page.prePage}, ${page.pageSize});"><</a></li> -
</#if> -
<#list page.navigatepageNums as navigatepageNum> -
<#if navigatepageNum==page.pageNum> -
<li class="active"><a href="javascript:queryAll(${navigatepageNum}, ${page.pageSize});">${navigatepageNum}</a></li> -
</#if> -
<#if navigatepageNum!=page.pageNum> -
<li><a href="javascript:queryAll(${navigatepageNum}, ${page.pageSize});">${navigatepageNum}</a></li> -
</#if> -
</#list> -
<#if !page.isLastPage> -
<li><a href="javascript:queryAll(${page.nextPage}, ${page.pageSize});">></a></li> -
<li><a href="javascript:queryAll(${page.lastPage}, ${page.pageSize});">>></a></li> -
</#if> -
</ul> -
</div> -
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> -
<script type="text/javascript"> -
function queryAll(pageNum, pageSize){ -
document.location.href="http://localhost/phoneRegisterandAngularJS/pageHelperController/list?pageNum="+pageNum; -
} -
</script> -
</body> -
</html>