(JAVA自学笔记一)PageBean基础分页

最新推荐文章于 2022-03-18 09:31:54 发布

BaS刘华北

最新推荐文章于 2022-03-18 09:31:54 发布

阅读量1.2k

点赞数

分类专栏： JAVA 文章标签： JAVA

本文链接：https://blog.youkuaiyun.com/weixin_40980148/article/details/90380710

版权

JAVA 专栏收录该内容

9 篇文章

订阅专栏

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">&laquo;</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">&laquo;</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">&raquo;</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">&raquo;</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>