傻瓜版的分頁思路

  在做項目的過程中，遇到了好多次的頁面分頁，但是每次做的時候都忘記以前是怎麼做的。

  最近的一個頁面中，其分頁情況是比較全的，既有展示，也有搜索。而且，本次做的分頁也是比較之前相對完善的。

  因此，利用本次機會，我就把分頁這個功能總結一下，以免以後忘記了。

情況說明：

  如上圖，既有頁面展示，也有搜索。也就是說，一進到這個頁面，要做到對所有記錄的分頁展示，同時經過條件搜索後要對得到的搜索結果進行展示。並且，全紀錄展示分頁與搜索分頁不會相互干擾，另外當搜索條件框內有內容時，也不會對分頁結果產生影響。

思路如下：

  這裏有一個方法，十分關鍵，所有的分頁操作基本都是調用這個方法。

  

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)這個方法操作的.