基于 HTML、Ajax以及 Mybatis 实现 Web 分页

1.前端 js 文件

<script type="text/javascript">
	
	var currPageNoStr=$("#pageIndex").val();       //当前页数
	var currPageNo = parseInt(currPageNoStr);
	var pageCount=1;                               //总页数
	//直接加载主函数
	$(function(){
		showPage();
	    $("#frontPage").click(front);
	    $("#nextPage").click(next);
	    $("#firstPage").click(goFirst);
	    $("#lastPage").click(goLast);
	});
	
	//用来处理请求成功后，返回订单列表的函数
	function common(data){
		$("#tmAbout").empty();       //清空需要列出的内容
        $.each(data.obj, function (index, content) {
	    $("#tmAbout").append("<div class='col-lg-4'><div class='tm-bg-black-transparent 
tm-about-box'><div class='tm-about-number-container'>"+index+"</div><h3 class='tm-about-
name'>Best Quality</h3><p class='tm-about-description'>"+content.order_url+"</p></div>
</div>");
	     });
	}
	//第一次返回页面
	function showPage(){
		var currPageIndex = {"currPageNo":currPageNo};
		$.ajax({
			url:"/data_miner/order/paging",
			dataType:"json",
			async:false,
			data:currPageIndex,
			type:"post",
			success:function(data){
				/* var orderData = eval(data);         */
				if(data.message=="发生未知错误！"){
					alert("出现错误！");
				}else{
					var countStr = data.message;
					var count = parseInt(countStr);
				    pageCount = Math.ceil(count/9);
					$("#tmAbout").empty();          //清空需要列出的内容
					$.each(data.obj, function (index, content) {
						$("#tmAbout").append("<div class='col-lg-4'><a 
href=http://localhost:8080/data_miner/order?order_id="+content.order_id+"><div class='tm-
bg-black-transparent tm-about-box'><div class='tm-about-number-container'>"+index+"</div>
<h3 class='tm-about-name'>Best Quality</h3><p class='tm-about-
description'>"+content.order_url+"</p></div></a></div>");
		            });   
				}
			},
			error:function(data){
				alert(data.message);
			}
		});
	}
	//上一页
    function front(event){
 		if(currPageNo==1){
 			currPageNo=1;
 		}else{
 			currPageNo--;
 		}
 		var currPageIndex = {"currPageNo":currPageNo};
	  	$.ajax({  
	        type:"POST",  
	        dataType:"json",  
	        url:"/data_miner/order/paging",   //回发到的页面  
	        data:currPageIndex,
	        success: common
	     });
    }
    //下一页
    function next(event){
 		if(currPageNo==pageCount){
 			currPageNo=pageCount;
 		}else{
 			currPageNo++;
 		}
 		var currPageIndex = {"currPageNo":currPageNo};
	  	$.ajax({  
	        type:"POST",  
	        dataType:"json",  
	        url:"/data_miner/order/paging",   //回发到的页面  
	        data:currPageIndex,
	        success: common
	     });
    }
    //首页
    function goFirst(event){
   		currPageNo=1;
   		var currPageIndex = {"currPageNo":currPageNo};
	  	$.ajax({  
	        type:"POST",  
	        dataType:"json",  
	        url:"/data_miner/order/paging",   //回发到的页面  
	        data:currPageIndex,
	        success: common
	     });
    }
    //尾页
    function goLast(event){
   		currPageNo=pageCount;
   		var currPageIndex = {"currPageNo":currPageNo};
	  	$.ajax({  
	        type:"POST",  
	        dataType:"json",  
	        url:"/data_miner/order/paging",   //回发到的页面  
	        data:currPageIndex,
	        success: common
	     });
    }
</script>

2.Controller 层

        @Autowired
	private OrderService orderService;
	
	/*
	 * 分页功能
	 */
	@RequestMapping("paging")
	public @ResponseBody Response orderList(Integer currPageNo) {
		Response re = null;
		currPageNo = (currPageNo-1)*9;
		re = orderService.orderList(currPageNo);
		return re;
	}

3.Service 层

        @Autowired
	private OrderMapper orderMapper;
	
	/*
	 * 订单分页以及获取未完成的订单总数
	 */
	public Response orderList(Integer currPageNo) {
		Response re = new Response();
		try {
			List<Order> list = orderMapper.getOrdersJudgeFlag(currPageNo);
			int countPage = orderMapper.countOrdersJudgeFlag();
			String countPageStr = Integer.toString(countPage);
			re.setFlag(true);
			re.setMessage(countPageStr);
			re.setObj(list);
		} catch (Exception e) {
			re.setFlag(false);
			re.setMessage("发生未知错误！");
			re.setObj(null);
			e.printStackTrace();
		}
		return re;
	}

4.Mapper 层

int countOrdersJudgeFlag()throws Exception;

List<Order> getOrdersJudgeFlag(@Param(value="currPageNo") Integer currPageNo)throws 
Exception;

5.xml 文件

  <select id="countOrdersJudgeFlag" resultType="java.lang.Integer">
  	select count(*) from `order` where order_flag=0
  </select>

  <select id="getOrdersJudgeFlag" parameterType="java.lang.Integer" 
resultType="com.data_miner.entity.Order">
  	select * from `order` where order_received=0 limit ${currPageNo},9
  </select>