JavaScript实践——AJAX分页

今天写了一个AJAX分页，把思路整理一下。

 

private int count = 0;// 总记录数


	private int currentPage = 0; //当前页面


	private int pageSize = 10; // 每页记录数


	private int totalPage = 1;  //总页总书


        //从数据取出总记录数，求出页面总数


        count = XXXService.getCount(st);


        if(count>0){


			if(count % pageSize!=0){


				totalPage = count / pageSize + 1;


			}else


				totalPage = count /pageSize;


	 }


/**根据http传入的第几页，从数据库找出记录**?


currentPage = Integer.valueOf(_request.getParameter("page"));


String hql = "from RfVipVoucher rfVipVoucher where rfVipVoucher.buyer = " + person.getId();


List buyRecord = XXXServicer.findByHql(hql,currentPage,pageSize);


		Iterator ite = buyRecord.iterator();


		StringBuffer xml = new StringBuffer("<?xml version=\"1.0\" encoding=\"GBK\" ?>");


		xml.append("<response>");


		int index = 0;


		while (ite.hasNext()) {


			RfVipVoucher rfVipVoucher = (RfVipVoucher) ite.next();


			String num = rfVipVoucher.getNum();


			Integer cardTime = rfVipVoucher.getCardTime();


			String buyTime =  UtilTools.formatDate(rfVipVoucher.getGerTime(),"long");


			String flag = rfVipVoucher.getFlag().equals("0") ? "未激活卡" :"已激活卡";


			String activeTime = (rfVipVoucher.getPutTime()!= null)? UtilTools.formatDate(rfVipVoucher.getGerTime(),"long"):"点击激活";


			xml.append("<rfVipVoucher>");


				xml.append("<index>");


				xml.append(index);


				xml.append("</index>");


				xml.append("<num>");


				xml.append(num);


				xml.append("</num>");


				xml.append("<cardTime>");


				xml.append(cardTime);


				xml.append("</cardTime>");


				xml.append("<buyTime>");


				xml.append(buyTime);


				xml.append("</buyTime>");


				xml.append("<flag>");


				xml.append(flag);


				xml.append("</flag>");


				xml.append("<activeTime>");


				xml.append(activeTime);


				xml.append("</activeTime>");


			xml.append("</rfVipVoucher>");


			index++;


		}


		


		xml.append("<page>");


		xml.append(currentPage);


		xml.append("</page>");


		xml.append("<totalPage>");


		xml.append(totalPage);


		xml.append("</totalPage>");





		xml.append("</response>");


		


		_response.setContentType("text/xml;charset=GBK");


		_response.setHeader("Pragma", "No-cache");


		_response.setHeader("Cache-Control", "no-cache");


		_response.setDateHeader("Expires", 0);

 

function loadRecord(page){  // 加载第page页的数据
				var url = "<%=contextPath%>/userCenter/RFContextBuyRecord.html?page="+page+"&timeStamp=" + new Date().getTime();
				AJAXUtil.doRequstUsingGet(recordStateChange,url,true);
			}
			
			function recordStateChange(){
			
				var xmlDoc = xmlHttpRequest.responseXML;
			    var nums=xmlDoc.getElementsByTagName("num");	
			    var cardTimes=xmlDoc.getElementsByTagName("cardTime");	
			    var buyTimes=xmlDoc.getElementsByTagName("buyTime");	
			    var flags=xmlDoc.getElementsByTagName("flag");	
			    var activeTimes=xmlDoc.getElementsByTagName("activeTime");	
			    var len = nums.length;
			    var tab = document.getElementById("recordList");
			    /**清空表**/
		        clearRecordList();
			    var row, cell, txtNode;
			    for (var i = 0; i < len; i++) {
			        var num = nums[i].firstChild.data;	
			      	var cardTime=cardTimes[i].firstChild.data;
			      	var buyTime=buyTimes[i].firstChild.data;
			      	var flag=flags[i].firstChild.data;
			      	var activeTime=activeTimes[i].firstChild.data;
			      	row = document.createElement("tr");
			        row.appendChild(createCellWithText(num));
			        row.appendChild(createCellWithText(cardTime));
			        row.appendChild(createCellWithText(buyTime));
			        if(flag=="未激活卡") row.appendChild(createCellWithElement("未激活卡"));
			        else row.appendChild(createCellWithText(flag));
			        if(activeTime=="点击激活")  row.appendChild(createCellWithElement("点击激活"));
			        else  row.appendChild(createCellWithText(activeTime));
			        tab.appendChild(row);
			        
			    }	
			   	var page = parseInt(xmlDoc.getElementsByTagName("page")[0].firstChild.data);	
			    var totalPage = parseInt(xmlDoc.getElementsByTagName("totalPage")[0].firstChild.data);	
			    
			    var totalSpan = document.getElementById("totalSpan");
			    var preA = document.getElementById("preA");
			    var nextA = document.getElementById("nextA");
			    document.getElementById("page").value = page;
			    totalSpan.innerHTML = "<font color='red'>" +page+"/"+totalPage+"</font>";
			    
			    if(page<=1){
		        	preA.onclick = function(){ 
		        		return;
		        	};	
			    }else{
			        preA.οnclick=function (){
				        var p=parseInt(document.getElementById("page").value)-1;
				        loadRecord(p);
			      	};
			    }	
			    
			    if(page>=totalPage){
			        nextA.οnclick= function(){
				        	return;
				        };	
			    }else{
			    	 nextA.οnclick=function (){
			    	 	var p=parseInt(document.getElementById("page").value)+1;
			    	 	 loadRecord(p);
			    	};
			    }	
			}
			
			function createCellWithText(text){ //创建一个TD元素，内含文本
			    var cell= document.createElement("td");
			    cell.appendChild(document.createTextNode(text));
			    cell.style.textAlign = "center";
			    cell.style.border = "1px solid #94D7F1";
			    return cell;
			}
			
			function createCellWithElement(text){ //创建一个TD元素，内含元素
			    var cell= document.createElement("td");
			    var aElement = document.createElement("a")
			    aElement.href="<%=contextPath %>/RF/preVipVoucher.html";
			    aElement.target="_blank";
			    var txt = document.createTextNode(text)
			    aElement.appendChild(txt);
			    cell.appendChild(aElement);
			    cell.style.textAlign = "center";
			    cell.style.border = "1px solid #94D7F1";
			    return cell;
			}
           
			function clearRecordList(){
			    var tab = document.getElementById("recordList");   	
			    while(tab.childNodes.length > 0) {
			        tab.removeChild(tab.childNodes[0]);
			    }	
			}