分页是我们经常会碰到的需求之一,今天我们就使用企业中很常用的mybatis分页插件pageHelper来给大家做一个ssm整合bootstrap分页的案例
先看效果图:
一:建立数据库student:
学生表student
年级表grade:
二:创建web项目:myStudent搭建起ssm框架:
三:将分页插件pageHelper jar包拷贝到lib文件夹下
四:在mybatis配置文件sqlMapConfig.xml中配置分页插件:
<plugins>
<plugin interceptor="com.github.pagehelper.PageHelper">
<!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL六种数据库-->
<property name="dialect" value="mysql"/>
</plugin>
</plugins>
@Controller
public class studentCont
五:编写控制器的方法:
@Controller
public class studentController {
@Autowired
private studentService StudentService;
@RequestMapping("/Index")
public String Index(@RequestParam(value="pn",defaultValue="1") int pn,Model model)
{
// 在查询之前需要调用,传入当前第几页,以及每页多少条记录
PageHelper.startPage(pn,3);
List<student> lstStudent = StudentService.findAllStudent();
// 使用pageInfo包装查询后的结果,只需要将pageInfo交给页面就行了。
// 封装了详细的分页信息,包括有我们查询出来的数据,传入连续显示的页数
PageInfo<student> page = new PageInfo<student>(lstStudent,3);
model.addAttribute("pageInfo", page);
return "Index"; }
}
这里的参数pn表示当前第几页,默认值defaultValue为1
PageHelper.startPage(pn,3);这行代码在分页查询之前调用第一个参数pn表示当前第几页,第二个参数3表示每页显示3条记录
PageInfo<student> page = new PageInfo<student>(lstStudent,3);
这行代码将查询出的所有学生记录封装到PageInfo中,第一个参数表示查询出的所有学生,第二个参数表示连续显示的页码数。
将page传到页面。
六:编写jsp页面
(1) 引入bootstrap文件
<head>
<%pageContext.setAttribute("App_PATH", request.getContextPath()); %>
<link
href="${App_PATH}/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<script type="text/javascript" src="${App_PATH}/staitc/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src ="${App_PATH }/staitc/js/bootstrap.min.js"></script>
</head>
(2) 使用bootstrap搭建布局:
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>ssm-crud</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary" >新增</button>
<button class="btn btn-danger">删除</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>年级</th>
<th>操作</th>
</tr>
<c:forEach items="${pageInfo.list }" var="stu">
<tr>
<th>${stu.sid }</th>
<th>${stu.sname }</th>
<th>${stu.age }</th>
<th>${stu.grade.gname }</th>
<th>
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil"></span>编辑
</button>
<button class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash"></span>删除
</button>
</th>
</tr>
</c:forEach>
</table>
</div>
(3)显示分页信息和分页导航:
<div class="row">
<div class="col-md-6">当前${pageInfo.pageNum }页,总${pageInfo.pages }页,总${pageInfo.total }条记录</div>
<div class="col-md-6">
<ul class="pagination">
<li><a href="${App_PATH}/Index?pn=1">首页</a></li>
<!--如果有前一页则加上前一页的超链接 -->
<c:if test="${pageInfo.hasPreviousPage }">
<li><a href="${APP_PATH }/Index?pn=${pageInfo.pageNum-1}"
aria-label="Previous"> <span aria-hidden="true">«</span>
</a></li>
</c:if>
<!--循环遍历所有页码并显示 -->
<c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
<c:if test="${page_Num==pageInfo.pageNum }">
<li class="active"><a href="#">${page_Num}</a></li>
</c:if>
<c:if test="${page_Num!=pageInfo.pageNum }">
<li><a href="${App_PATH}/Index?pn=${page_Num}">${page_Num}</a></li>
</c:if>
</c:forEach>
<!--如果有下一页则显示下一页的超级链接 -->
<c:if test="${pageInfo.hasNextPage }">
<li><a href="${App_PATH}/Index?pn=${pageInfo.pageNum+1}" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</c:if>
<li><a href="${App_PATH}/Index?pn=${pageInfo.pages}">末页</a></li>
</ul>
</div>
</div>
</div>
如果需要源代码请加微信 350293616 领取