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

    xiaoxiao2025-08-13  4

    为什么需要分页查询

    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>
    最新回复(0)