分页查询CRUD及前端页面展示代码实现

为什么需要分页查询

• 1.处理大量数据的时候，可能造成页面过于冗余，客户体验不好，同时也加大了查询的时间。
• 2.真分页和假分页
  • 2.1 真分页：一次性查询到内存
    • 优势： 第一次加载过后，查询的速度很快
    • 劣势： 第一次加载可能过长，导致空间和时间的消耗，只需要查询少量数据的时候会很浪费资源和时间。
  • 2.2 假分页：客户查询一次，我们每次返回当前页的数据
    • 优势： 节约空间，时间
    • 劣势： 相对于真分页第一次之后查询速度不及真分页

代码实现

• 1.分页对象

public class PageList<T> {
	//当前页
	private Integer currentPage;
	//总页数
	private Integer totalPage;
	//当前页面显示数据
	private Integer pageSize;
	//总数据数
	private Integer totalData;
	//首页
	private Integer firstPage=1;
	//上一页
	private Integer prePage;
	//下一页
	private Integer nextPage;
	//尾页
	private Integer lastPage;
	//显示的数据
	private List<T> list;
	……
	public PageList(Integer currentPage, Integer pageSize, Integer totalData, List<T> list) {
		this.currentPage = currentPage;
		this.pageSize = pageSize;
		this.totalData = totalData;
		this.list = list;
		
		//首页
		this.firstPage=1;
		//总页数
		this.totalPage=this.totalData%this.pageSize==0?this.totalData/this.pageSize:this.totalData/this.pageSize+1;
		//上一页
		this.prePage=this.currentPage==1?1:this.currentPage-1;
		//下一页
		this.nextPage=this.currentPage==this.totalPage?this.totalPage:this.currentPage+1;
		//尾页
		this.lastPage=this.totalPage;
	}
}

• 2.分页条件对象

public class SqlCondition {
	private Integer currentPage=1;
	private Integer pageSize=10;
	…….
}

• 3.Dao层

public PageList<Images> queryAll(SqlCondition sc) {
		String countSql="select count(*) from images";
		Integer count = jt.queryForObject(countSql, Integer.class);
		
		
		String sql="select * from images";
		List<Images> list = jt.query(sql, new BeanPropertyRowMapper(Images.class));
		PageList<Images> pageList = new PageList<>(sc.getCurrentPage(), sc.getPageSize(), count, list);
		System.out.println(pageList);
		return pageList;
	}

• 4.Controller层

@RequestMapping("/query")
	public String query(SqlCondition sc,Model m){
		PageList<Images> queryAll = service.queryAll(sc);
		m.addAttribute("pageList",queryAll);
		return "main";
	}

• 5.前端页面-数据展示

<c:forEach items="${requestScope.pageList.list }" var="img">
	<tr>
		<th>#${img.imgid }</th>
		<th>${img.storepath }</th>
		<th>${img.intro }</th>
		<th>
<c:choose>
				<c:when test="${img.isenabled }">
					<span class="glyphicon glyphicon-ok" aria-hidden="true" />
				</c:when>
				<c:otherwise>
					<span class="glyphicon glyphicon-remove" aria-hidden="true"/>
				</c:otherwise>
			</c:choose>
</th>
		<th>${img.inputdate }</th>
		<th><a href="main_edit.html" class="btn-default tableA"><span
							class="glyphicon glyphicon-pencil" aria-hidden="true">修改</span></a> <a
						href="" class="btn-default tableA"><span
							class="glyphicon glyphicon-trash" aria-hidden="true">删除</span></a>
</th>
	</tr>
</c:forEach>

• 6.前端分页

<ul class="pagination" id="paging">
				<li><span>当前第${requestScope.pageList.currentPage }页</span></li>
				<li><a href="${pageContext.request.contextPath }/img/query?currentPage=${requestScope.pageList.currentPage }"> <span aria-hidden="true">首页</span>
				</a></li>
				<li><a href="${pageContext.request.contextPath }/img/query?currentPage=${requestScope.pageList.prePage }" aria-label="上一页"> <span aria-hidden="true">上一页</span>
				</a></li>
				<li></li>
				<li><a href="${pageContext.request.contextPath }/img/query?currentPage=${requestScope.pageList.nextPage }" aria-label="下一页"> <span aria-hidden="true">下一页</span>
				</a></li>
				<li><a href="${pageContext.request.contextPath }/img/query?currentPage=${requestScope.pageList.lastPage }" aria-label="尾页"> <span aria-hidden="true">尾页</span>
				</a></li>
				<li><span>总页数：共${requestScope.pageList.totalPage }页</span> <span>总数据：共${requestScope.pageList.totalData }条</span></li>
			</ul>