|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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 //最后一頁的記錄數(shù) 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()"/> 頁(當(dāng)前頁<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> |
|
|
