实现页面分页

web项目经常遇到页面分页，在这里总结一下。

先进行数据分析：需要传给后台当前页面数，每页显示几条数据，数据总数形成的页面总数

逻辑需求：将数据总数查出来形成页面总数

首先是进行总数的计算，作用就是在前端页面形成 “【1/n】”

<select id="getCount" resultType="long">
     select count(*) from 表
 </select>

service中进行逻辑处理，根据数据总数和每页显示条数确定总页数


@Override
	public Integer queryTotalPage(Integer rows) {
		List<Movie> movieAllList = movieMapper.selectAllMovie();
		int total = movieAllList.size();  //这里可以直接调用getCount,一样
		//利用total和rows计算总页数totalPage
		int totalPage=total%rows==0?(total/rows):((total/rows)+1);
		return totalPage;
	}

页面总数确定后，确定起始页以及将查询数据。

由于起始页start和每页显示几页rows不是实体属性，需要使用@Param注解給参数命名

 List<String> pagingMovie(@Param("start")int start,@Param("rows")Integer rows);

<select id="pagingMovie" resultType="com.lyf.filmbase.entity.Movie">
	select * from movie limit #{start},#{rows}
 </select>

如果当前是首页（=0），start=0,则上面的数据从0条到rows条查出即可。

public List<String> pagingMovie(Integer currentPage, Integer rows) {
		//处理业务逻辑,page变成start,
			if(currentPage<=0){
				currentPage=1;
				}
			int start=(currentPage-1)*rows;//最小是0
			List<String> movieList=movieMapper.pagingMovie(start,rows);
			return movieList;
		}

这里为了将页数信息与实体数据一并传出另写了一个vo类,便于controller调用

public class Page implements Serializable{
	private Integer currentPage;
	private Integer totalPage;
	private List<String> objectList;
	public Integer getCurrentPage() {
		return currentPage;
	}
	public void setCurrentPage(Integer currentPage) {
		this.currentPage = currentPage;
	}
	
	public Integer getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(Integer totalPage) {
		this.totalPage = totalPage;
	}
	public List<String> getObjectList() {
		return objectList;
	}
	public void setObjectList(List<String> objectList) {
		this.objectList = objectList;
	}	
}

controller中进行封装。

@RequestMapping("moviePage")
		public String queryProducts(Integer currentPage,Integer rows,HttpSession session){
			
			List<String> movieList=filmBiz.pagingMovie(currentPage, rows);
			Integer totalPage=filmBiz.queryTotalPage(rows);
			Page page=new Page();
			page.setObjectList(movieList);
			page.setCurrentPage(currentPage);
			page.setTotalPage(totalPage);
			session.setAttribute("page", page);
			return "film/movieList";
		}

前端接收并在访问时附上当前页数信息，即可查出对应范围内的数据实现分页效果。

 <!-- 分页 -->
			      <div class="pager">
				  <span><strong>【${page.currentPage}/${page.totalPage}】</strong></span>
				         <!-- 第一页情形 -->
						  <c:if test="${page.currentPage eq 1}">
						    <a href="film/moviePage.do?currentPage=2&rows=10"><strong>下一页&nbsp;&nbsp;&nbsp;</strong></a>
						  	<a href="film/moviePage.do?currentPage=${page.totalPage}&rows=10"><strong>&nbsp;&nbsp;&nbsp;尾页</strong></a>
						  </c:if>
						  <!-- 非第一页也非最后一页-->
						  <c:if test="${page.currentPage>1 and page.currentPage<page.totalPage}">
						  	<a href="film/moviePage.do?currentPage=1&rows=10"><strong>&nbsp;&nbsp;&nbsp;首页</strong></a>
						  	<a href="film/moviePage.do?currentPage=${page.currentPage-1}&rows=10"><strong>上一页</strong></a>
						  	<a href="film/moviePage.do?currentPage=${page.currentPage+1 }&rows=10"><strong>下一页</strong></a>
						  	<a href="film/moviePage.do?currentPage=${page.totalPage}&rows=10"><strong>&nbsp;&nbsp;&nbsp;尾页</strong></a>
						  </c:if>
						  <!-- 最后一页情形 -->
						  <c:if test="${page.currentPage==page.totalPage}">
						  	<a href="film/moviePage.do?currentPage=1&rows=10">首页</a>
						  	<a href="film/moviePage.do?currentPage=${page.currentPage-1}&rows=10">上一页</a>
						  </c:if>
					</div>	
		<!-- 分页结束 -->
		<c:if test="${requestScope.size<=0}">
			    没有符合条件的数据,请更换查询条件
	    </c:if>

PS: 记得在刚开始进入页面时的url中附上起始页数信息。

如果页面翻页时（如评论页面）避免分页位置变化可以使用ajax异步刷新。

猜你喜欢