PageBean基础分页
分页是web开发中比较常用又比较难的一部分，贯穿了web的前后端，
在此介绍一种最基础的方法，让我们不用每次把所有数据都传到前台，而是通过前台的当前页，和后台设置的每页数，来计算每次要查的数据索引范围，返回单页数据集合。
首先我们创建一个包装类用来装我们的数据集合，里面还封装了分页的参数。
1.创建PageBean类
import java.util.List;
public class PageBean<T> {
private int currentPage;//当前是第几页
private int currentCount;//每页条数
private int totalCount;//总条数
private int totalPage;//总页数
private List<T> list;//当页所存数据
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public int getCurrentCount() {
return currentCount;
}
public void setCurrentCount(int currentCount) {
this.currentCount = currentCount;
}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public List<T> getList() {
return list;
}
public void setList(List<T> list) {
this.list = list;
}
}2在前端页面中设置好分页的页脚
记得加入bootstrap
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"/>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"/>这个是页面最下面的页脚，一般都放在table下面
<!--分页 -->
<div style="width: 380px; margin: 0 auto; margin-top: 50px;">
<ul class="pagination" style="text-align: center; margin-top: 10px;">
<!-- 上一页 -->
<c:if test="${pageBean.currentPage==1 }">
<li class="disabled">
<a href="javascript:void(0);" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<c:if test="${pageBean.currentPage!=1 }">
<li>
<a href="${pageContext.request.contextPath}/在这里修改服务器路径?currentPage=${pageBean.currentPage-1 }" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<!-- 显示每一页 -->
<c:forEach begin="1" end="${pageBean.totalPage }" var="page">
<!-- 判断是否是当前页 -->
<c:if test="${page==pageBean.currentPage }">
<li class="active"><a href="javascript:void(0);">${page }</a></li>
</c:if>
<c:if test="${page!=pageBean.currentPage }">
<li><a href="${pageContext.request.contextPath}/在这里修改服务器路径?currentPage=${page }">${page }</a></li>
</c:if>
</c:forEach>
<!-- 下一页 -->
<c:if test="${pageBean.currentPage==pageBean.totalPage }">
<li class="disabled">
<a href="javascript:void(0);" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<c:if test="${pageBean.currentPage!=pageBean.totalPage }">
<li>
<a href="${pageContext.request.contextPath}/在这里修改服务器路径?currentPage=${pageBean.currentPage+1 }" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
</ul>
</div>
<!-- 分页结束 -->主要注意c:foreach中items是固定的${pageBean.list}即可
3.编写后台代码（SSM）
- controller层
@RequestMapping(value = "/queryAllMusic.action") public ModelAndView queryAllMusic(@RequestParam int currentPage)//在这里接收当前页参数 { int currentCount = 12;//设置每页数（常量一般可以提取出来放到配置文件或工具类中） //调用Service层 PageBean pageBean=adminServiceImpl.queryAllMusic(currentPage,currentCount); //准备返回界面数据 ModelAndView mav=new ModelAndView(); mav.addObject("pageBean", pageBean); mav.setViewName("/admin/admin_allmusic"); return mav; }2.service层
-
public PageBean<Music> queryAllMusic(int currentPage,int currentCount){ //初始化 PageBean<Music> pageBean = new PageBean<Music>(); //1、封装当前页 pageBean.setCurrentPage(currentPage); //2、封装每页显示的条数 pageBean.setCurrentCount(currentCount); //3、封装总条数 int totalCount = 0; //使用mybatis是查不到异常的，try catch可以删除 try { //先执行一条查询总条数的语句 totalCount = adminMapper.getMusicCount(); } catch (Exception e) { e.printStackTrace(); } pageBean.setTotalCount(totalCount); //4、封装总页数 int totalPage = (int) Math.ceil(1.0*totalCount/currentCount); pageBean.setTotalPage(totalPage); //5、当前页显示的数据 // select * from music limit ?,?; // 当前页与起始索引index的关系 int index = (currentPage-1)*currentCount; List<Music> list = null; try { //再执行一条查询当前页的语句 list = adminMapper.queryAllMusic(index,currentCount); } catch (Exception e) { e.printStackTrace(); } pageBean.setList(list); return pageBean; }3.mapper层
-
//mybatis接口类方法，传多个参数 public List<Music> queryAllMusic(@Param(value = "index") int index,@Param(value = "currentCount") int currentCount);<!-- mapper.xml中语句 --> <select id="queryAllMusic" resultType="music"> select * from music limit #{index},#{currentCount}; </select>4.在前端页面中准备显示数据
-
<table class="table table-striped" cellspacing="0" rules="all" border="1" style="border-collapse:collapse;"> <tbody> <tr class="active"> <th scope="col">歌曲ID</th> <th scope="col">歌曲名</th> <th scope="col">演唱者</th> <th scope="col">时长</th> <th scope="col">是否推荐</th> <th scope="col">图片</th> <th scope="col">音频</th> <th scope="col">操作</th> </tr> <c:forEach items="${pageBean.list}" var="music"> <tr class="active" id="${music.mu_id}"> <td align="center">${music.mu_id}</td> <td align="center">${music.name}</td> <td align="center">${music.singer}</td> <td align="center">${music.duration}</td> <td align="center"> <c:if test="${music.recommend==0}">否</c:if><c:if test="${music.recommend!=0}">是</c:if> </td> <td align="center"> <img width="30" height="30" src="${pageContext.request.contextPath}/static/picture/${music.picture}"> </td> <td align="center">${music.sound}</td> <td><a href="${pageContext.request.contextPath}/queryMusicByMu_id.action?mu_id=${music.mu_id}"><span style="color: darkgreen">编辑</span></a> <a href="#" onclick="deleteMusicByMu_id(${music.mu_id})"><span style="color: darkgreen">删除</span></a> </tr> </c:forEach> </tbody> </table>5.数据展示
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
