json分页

JSON分页
1、传回json的数据格式，写出表格，表格后面调用下面两个方法
2、创建分页信息

 <!-- 分页文字信息 ：拿到控制器处理请求时封装在pageInfo里面的分页信息-->
                	<div class="col-md-6" id="page_info_area1">
               			 </div>
               			 <!-- 分页码 -->
               			 <div class="col-md-6" id="page_nav_area1">
                       		<!-- 
                         		   1.pageContext.request.contextPath表示当前项目路径，采用的是绝对路径表达方式。一般为http:localhost:8080/项目名 。
                          			  2.首页，末页的逻辑：pn=1访问第一次，pn=${pageInfo.pages}访问最后一页
                       		-->
                      		 <!-- 如果还有前页就访问当前页码-1的页面， -->
                      		 <!--遍历所有导航页码，如果遍历的页码页当前页码相等就高亮显示，如果相等就普通显示  -->
                       		<!-- 如果还有后页就访问当前页码+1的页面， -->
               		 </div>

3、方法一

/**
		创建分页信息墒情
	*/
	function build_pagination_info1(result){
	$("#page_info_area1").empty();
	//得到服务器返回的jason数据里的分页信息，然后拼接
	var pageNum =当前页;
	var pages =总页数;
	var total = 总条数;
	$("#page_info_area1").append("当前"+pageNum+"页,共"+pages+"页,总"+total+"条记录");
	}

4、方法二

/**
		创建分页导航条：
		根据bootstrap文档里的分页说明，使用jquery创建元素。
	*/
	function build_pagination_nav1(result){
	$("#page_nav_area1").empty();
	//首页
	var fristPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append("首页"));
	//前一页
	var prePageLi = $("<li></li>").append($("<a></a>").attr("href","#").append($("<span></span>").append("&laquo;")));
    //如果没有前一页，就让按钮不能被点击,否则绑定点击事件，重新发送ajax请求，访问相应页面
    if(当前页 == 1){
        fristPageLi.addClass("disable");
        prePageLi.addClass("disable");
    }
    else{
        fristPageLi.click(function(){
        	表格方法(1);
        });
        prePageLi.click(function(){
        		表格方法(当前页 -1);
        });
    }
	var ul = $("<ul></ul>").addClass("pagination").append(fristPageLi).append(prePageLi);
	 var navigatepageNums=[];
		for(var i=1;i<=总页数;i++){
			navigatepageNums.push(i);
		 }
		$.each(navigatepageNums,function(index,element){
	        var numLi = $("<li></li>").append($("<a></a>").attr("href","#").append(element));
	            //如果遍历的页码等于当前页面，就高亮显示，然后添加点击事件，如果有点击，就重新发送ajax请求，访问当前页面（pn=element）
	            if(result.page==element){
	                numLi.addClass("active");
	            }
	            numLi.click(function(){
	            	表格方法名(element);
	            })
	        ul.append(numLi);
	    })
	//下一页
	var nextPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append($("<span></span>").append("&raquo;")));
	//末页
	var lastPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append("末页"));
    //如果没有后一页，就让按钮不能被点击,否则绑定点击事件，重新发送ajax请求，访问相应页面
    if(当前页 == 总页数){
        nextPageLi.addClass("disable");
        lastPageLi.addClass("disable");
    }
    else{
        nextPageLi.click(function(){
        	表格方法(当前页 +1);
        });
        lastPageLi.click(function(){
        	表格方法(总页数）;
        });
    }
	ul.append(nextPageLi).append(lastPageLi);
	$("<nav></nav>").append(ul).appendTo("#page_nav_area1");
	}
	

5、页码部分

 var navigatepageNums=[];
		for(var i=1;i<=result.totalPages;i++){
			navigatepageNums.push(i);
		 }
		$.each(navigatepageNums,function(index,element){
	        var numLi = $("<li></li>").append($("<a></a>").attr("href","#").append(element));
	            //如果遍历的页码等于当前页面，就高亮显示，然后添加点击事件，如果有点击，就重新发送ajax请求，访问当前页面（pn=element）
	            if(result.page==element){
	                numLi.addClass("active");
	            }
	            numLi.click(function(){
	            	sqDate(element);
	            })
	        ul.append(numLi);
	    })