移动端分页

1.微信扫描网站入口二维码，进入移动端

2.点击“加载更多”按钮，实现移动端分页功能，目的减少客户等待时间以及节省流量（一次性加载全部数据，数据量大时会导致页面等待时间过长和不必要的流量浪费）

3.原理流程：ajax将form表单数据以及当前页面加1组装为数组转到后台，后台做分页查询，将结果组装到jsonArray中再传到前台，前台在ajax中用js代码将传来的数据也原来的列表页面进行组装，追加到原有列表后面。

4.核心代码：

　　1> 加载更多按钮和页码隐藏域　

<#if gTotalPageNumber != gCurrentPageNumber>
			<li class="more" onclick="moreAbility()">加载更多</li>
			<li class="noMore" style="display:none;">没有更多</li>
			<#else>
			<li class="more" style="display:none;" onclick="moreAbility()">加载更多</li>
			<li class="noMore">没有更多</li>
		</#if>
		<input type="hidden" id="gCurrentPageNumber" value="${gCurrentPageNumber}" />
		<input type="hidden" id="gTotalPageNumber" value="${gTotalPageNumber}" />

　　2> ajax 　　

 function moreAbility(){
        var gCurrentPageNumber = parseInt($("#gCurrentPageNumber").val()) + 1;
        var url = "${Context}/mobile/testing/moreInstitutions.action";
　　　　　//序列化form表单,得到的是组数对象
        var dataobj = $('#search').serialize();
　　　　 //拼接页码
        dataobj+="&gCurrentPageNumber="+ gCurrentPageNumber;
        var url = "${Context}/mobile/testing/moreAbility.action";
        $.ajax({
            url:url,
            async : false,
            type: "POST",
            data: dataobj,
            success: function(result) {
                var resultJson =  eval('('+result+')') ;
                var cuserList = resultJson.cuserList;
                for(var i = 0; i < cuserList.length; i++){
                    var divPDom = document.createElement("div");
                    divPDom.setAttribute("class","nengli_list");
                       
                    var divTitleDom = document.createElement("div");
                    divTitleDom.setAttribute("class","nengli_list_title");
                    divTitleDom.innerHTML = cuserList[i].unitName;
                    divPDom.appendChild(divTitleDom);
                    
                    
                    var divTextDom = document.createElement("div");
                    divTextDom.setAttribute("class","nengli_list_text content");
                    divTextDom.innerHTML = "检测范围:"+cuserList[i].detectionRange;
                    divPDom.appendChild(divTextDom);
                    
                    //加载到li标签前面,li标签是“加载更多“按钮
                    $("li").eq(-2).before(divPDom);                 
                }  
                   $("#gCurrentPageNumber").val(resultJson.gCurrentPageNumber);
                $("#gTotalPageNumber").val(resultJson.gTotalPageNumber);
                if(resultJson.gCurrentPageNumber == resultJson.gTotalPageNumber){
                    $(".more").css("display","none");
                    $(".noMore").css("display","");
                }
            },
            error:function(XMLHttpRequest){
                alert("操作失败,请重试！");
            }
        });
    }

 　　3> 组装后台数据　

　　　　　//能力查询 加载更多
	public String moreAbility() throws Exception{
　　　　　　　　　　//分页数据查询
		abilityQuery();
		JsonObject jsonObj = new JsonObject();
		jsonObj.addProperty("gCurrentPageNumber", super.gCurrentPageNumber);
		jsonObj.addProperty("gTotalPageNumber", super.gTotalPageNumber);
		JsonArray jsonArray = new JsonArray();
		for (int i = 0; i < cuserList.size(); i++) {
			JsonObject tempObj = new JsonObject();
			tempObj.addProperty("unitName", cuserList.get(i).getUnitName() == null ?"":cuserList.get(i).getUnitName());
			tempObj.addProperty("detectionRange", cuserList.get(i).getDetectionRange() == null ?"":cuserList.get(i).getDetectionRange());	
			jsonArray.add(tempObj);
		}
		jsonObj.add("cuserList", jsonArray);
		new Struts2Util().ResponsePrint(jsonObj.toString());
		return null;
	}