傻瓜版的分页思路

  在做项目的过程中，遇到了好多次的页面分页，但是每次做的时候都忘记以前是怎么做的。

  最近的一个页面中，其分页情况是比较全的，既有展示，也有搜索。而且，本次做的分页也是比较之前相对完善的。

  因此，利用本次机会，我就把分页这个功能总结一下，以免以后忘记了。

情况说明：

  如上图，既有页面展示，也有搜索。也就是说，一进到这个页面，要做到对所有记录的分页展示，同时经过条件搜索后要对得到的搜索结果进行展示。并且，全纪录展示分页与搜索分页不会相互干扰，另外当搜索条件框内有内容时，也不会对分页结果产生影响。

思路如下：

  这里有一个方法，十分关键，所有的分页操作基本都是调用这个方法。

  

function skipPage(currentPage){
	var state = $("#stateselect").val();
	$("#stateHidden").val(state);
	var billcode = $("#billcode").val();
	$("#billcodeHidden").val(billcode);
	var begintime = $("#begintime").val();
	$("#begintimeHidden").val(begintime);
	var endtime = $("#endtime").val();
	$("#endtimeHidden").val(endtime);
	var beginprice = $("#beginprice").val();
	$("#beginpriceHidden").val(beginprice);
	var endprice = $("#endprice").val();
	$("#endpriceHidden").val(endprice);
	  $.ajax({
		  url:"/orders/searchOrder",
		  type:"post",
		  async:true,
		  data:{
			stateHidden:$("#stateHidden").val(),
			billcodeHidden:$("#billcodeHidden").val(),
			begintimeHidden:$("#begintimeHidden").val(),
			endtimeHidden:$("#endtimeHidden").val(),
			beginpriceHidden:$("#beginpriceHidden").val(),
			endpriceHidden:$("#endpriceHidden").val(),
			currentPage:currentPage,
		  },
		  success:function(data){
			  $("#orderTable").empty();
			  $("#orderTable").append(data);
			  $.ajax({
				url:"/SkipPageUtils/skipPageSearch",
				type:"post",
				async:true,
				data:{
					currentPage:currentPage},
				success:function(data){
					$("div .fenye").html(data);
				}
			  })
		  }
	  })
}

搜索按钮也要绑定这个方法

<input  type="button" value="搜索" onclick="skipPage(1)" style="cursor: pointer;">

后台代码：

后台@Controller代码,

service层的代码要运用到 PageHelper插件,如何运用可以去百度,有很多教程.

	@RequestMapping("/searchOrder")
	public ModelAndView searchOrder(Integer stateHidden,String billcodeHidden,
			String begintimeHidden,String endtimeHidden,
			Integer beginpriceHidden,Integer endpriceHidden,Integer currentPage,HttpSession session) {
		List<Orders> list = service.searchOrder(stateHidden,billcodeHidden,begintimeHidden,endtimeHidden,beginpriceHidden,endpriceHidden,session,currentPage);
		ModelAndView mv = new ModelAndView("shopping_orderManage_list_templete.jsp");
		mv.addObject("list", list);
		return mv;
	}

分页后台代码

	@RequestMapping("/skipPageSearch")
	public ModelAndView skipPageSearch(String url,Integer currentPage,HttpServletRequest req) {
		ModelAndView mv = new ModelAndView("common_fenye_templete_search.jsp");
		Integer totalPageNum = (Integer)req.getSession().getAttribute("totalPageNum");
		mv.addObject("totalPageNum",totalPageNum);
		mv.addObject("currentPage",currentPage);
		return mv;
	}

分页模板

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<a href="javascript:void(0);" onclick="skipPage(1)">首页</a>
<c:if test="${currentPage != 1 }">
	<a href="javascript:void(0);" onclick="skipPage(${currentPage-1 })">前一页</a>
</c:if>
<c:forEach begin="1" end="${totalPageNum }" var="i">
	<c:if test="${currentPage == i }">
		<a href="javascript:void(0);" onclick="skipPage(${i })" class="this">${i }</a>
	</c:if>
	<c:if test="${currentPage != i }">
		<a href="javascript:void(0);" onclick="skipPage(${i })">${i }</a>
	</c:if>
</c:forEach>
<c:if test="${currentPage != totalPageNum }">
	<a href="javascript:void(0);" onclick="skipPage(${currentPage+1 })">后一页</a>
</c:if>
<a href="javascript:void(0);" onclick="skipPage(${totalPageNum })">末页</a>

---

也就是说,无论是分页展示,还是搜索分页,都是围绕在skipPage(currentPage)这个方法操作的.