<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>龙的传人--Xml_javascript分页</title> </head><body onload="getxmlDoc()"><script language="javascript" type="text/javascript">var xmlDoc;var nodeIndex;var pageIndex;var pageSize=13;var lastPage; //最后一页var overSize //最后一页的记录数function getxmlDoc(){ xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); var currNode; xmlDoc.async=false; xmlDoc.load("myTest.xml"); if(xmlDoc.parseError.errorCode!=0) { var myErr=xmlDoc.parseError; alert("出错！"+myErr.reason); } getRecordCount(); onFirst(); }function getRecordCount(){ var personNode= xmlDoc.selectNodes("/Root")[0]; var recordCount=personNode.childNodes.length; var pageCount=Math.ceil(recordCount/pageSize); document.getElementById("txtPageCount").value=pageCount; document.getElementById("txtRecordCount").value=recordCount; overSize=recordCount%pageSize; if(overSize>0) { lastPage=recordCount-overSize; } else { lastPage=recordCount-pageSize; } }function getPageRecord(pageIndex,pageSize){ clearRow("myTable"); var personNode= xmlDoc.selectNodes("/Root")[0]; var currNode=personNode.childNodes[pageIndex]; for(var i=pageIndex;i<pageIndex+pageSize;i++) { var arr=new Array(); var nNode= xmlDoc.selectSingleNode("Root/Person["+i+"]") ; arr[0]=nNode.getAttribute("Id"); //序号 arr[1]=nNode.childNodes[0].text; //工号 arr[2]=nNode.childNodes[1].text; //姓名 arr[3]=nNode.childNodes[2].text; //性别 arr[4]=nNode.childNodes[3].text; //部门 arr[5]=nNode.childNodes[4].text; //职位 arr[6]=nNode.childNodes[5].text; //地址 // arr[0]=personNode.childNodes[i].getAttribute("Id"); //序号// arr[1]=personNode.childNodes[i].childNodes[0].text; //工号// arr[2]=personNode.childNodes[i].childNodes[1].text; //姓名// arr[3]=personNode.childNodes[i].childNodes[2].text; //性别// arr[4]=personNode.childNodes[i].childNodes[3].text; //部门// arr[5]=personNode.childNodes[i].childNodes[4].text; //职位// arr[6]=personNode.childNodes[i].childNodes[5].text; //地址 addRow(i+1,"myTable",arr); } }function onFirst(){ pageIndex=0; var currIndex=pageIndex; getPageRecord(currIndex,pageSize) pageIndex=currIndex ; document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1; document.getElementById("txtCurrPageRecord").value=pageSize;}function onPrev(){ var currIndex=pageIndex; currIndex-=pageSize; getPageRecord(currIndex,pageSize) pageIndex=currIndex; document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1; document.getElementById("txtCurrPageRecord").value=pageSize; }function onNext(){ var currIndex=pageIndex; currIndex+=pageSize; getPageRecord(currIndex,pageSize) pageIndex=currIndex; document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1; document.getElementById("txtCurrPageRecord").value=pageSize; }function onLast(){ if(overSize>0) { getPageRecord(lastPage,overSize) document.getElementById("txtCurrPageRecord").value=overSize; } else { getPageRecord(lastPage,pageSize) document.getElementById("txtCurrPageRecord").value=pageSize; } pageIndex=lastPage; document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;}function toPage(){ var index=document.getElementById("txtCurrPage").value var currIndex=(index-1)*pageSize; if(event.keyCode==13) { getPageRecord(currIndex,pageSize); } pageIndex=currIndex;}function addRow(i,dataGridId,arr){ var row=document.createElement("tr"); var cell=createCellWidthText(i); row.appendChild(cell); for(var j=0;j<arr.length;j++) { cell=createCellWidthText(arr[j]); row.appendChild(cell); } document.getElementById(dataGridId).firstChild.appendChild(row);}function createCellWidthText(text){ var cell = document.createElement("td"); var textNode = document.createTextNode(text); cell.appendChild(textNode); return cell; }function clearRow(obj){ var table=document.getElementById(obj); var nodeTbody=table.firstChild var length=nodeTbody.childNodes.length; for(var i=length-1;i>0;i--) { nodeTbody.removeChild(nodeTbody.childNodes[i]); }}</script> <form id="form1" runat="server"> <div> <table align="center" style="border-right: #0033ff thin solid; border-top: #0033ff thin solid; border-left: #0033ff thin solid; width: 650px; border-bottom: #0033ff thin solid"> <tr> <td> 共<input id="txtPageCount" name="txtPageCount" style="width: 33px; color: #0000ff; border-top-style: none; border-right-style: none; border-left-style: none; background-color: transparent; border-bottom-style: none;" type="text" onkeydown="toPage()"/>页/ <input id="txtRecordCount" name="txtRecordCount" style="width: 46px; color: #3300ff; border-top-style: none; border-right-style: none; border-left-style: none; background-color: transparent; border-bottom-style: none;" type="text" onkeydown="toPage()"/>条记录 <input id="btnFirst" type="button" value="首页" onclick="onFirst()"/> <input id="btnPrev" type="button" value="上一页" onclick="onPrev()"/> <input id="btnNext" type="button" value="下一页" onclick="onNext()"/> <input id="btnLast" type="button" value="尾页" onclick="onLast()"/> 第<input id="txtCurrPage" name="txtCurrPage" style="width: 46px; color: #ff3333;" type="text" onkeydown="toPage()"/> 页(当前页<input id="txtCurrPageRecord" name="txtCurrPageRecord" style="width: 22px; color: #ff3333; border-top-style: none; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none;" type="text" onkeydown="toPage()"/>条记录）</td> </tr> <tr> <td> <table width="100%" id="myTable"> <tr style="background-color:Yellow"> <td style="width: 34px; height: 21px;"> Id</td> <td style="width: 34px; height: 21px;"> 序号</td> <td style="width: 42px; height: 21px;"> 工号</td> <td style="width: 36px; height: 21px;"> 姓名</td> <td style="width: 39px; height: 21px;"> 性别</td> <td style="width: 43px; height: 21px;"> 部门</td> <td style="width: 50px; height: 21px;"> 职位</td> <td style="width: 100px; height: 21px;"> 地址</td> </tr> </table> </td> </tr> </table> </div> </form></body></html>演示：http://home.goofar.com/lkc311/Default.htm
