Xml_javascript分頁
作者：Eve Cole
更新時間：2009-07-07 16:22:09
<!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 ">
<頭>
<title>龍的傳人--Xml_javascript分頁</title>
</頭>
<body onload="getxmlDoc()">
<腳本語言=“javascript”類型=“text/javascript”>
var xmlDoc；
var 節點索引；
var pageIndex;
var pageSize=13;
var 最後一頁； //最後一頁
var overSize //最後一頁的記錄數
函數 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();
}
函數 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(超過尺寸>0)
{
最後一頁=記錄計數-超過大小；
}
別的
{
最後一頁=記錄計數-頁大小；
}
}
函數 getPageRecord(pageIndex,pageSize)
{
清除行（“我的表”）；
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);
}
}
函數 onFirst()
{
頁面索引=0；
var currIndex=頁索引；
getPageRecord(currIndex,pageSize)
頁面索引=當前索引；
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;
}
函數 onPrev()
{
var currIndex=頁索引；
currIndex-=pageSize;
getPageRecord(currIndex,pageSize)
頁面索引=當前索引；
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;
}
函數 onNext()
{
var currIndex=頁索引；
currIndex+=頁面大小；
getPageRecord(currIndex,pageSize)
頁面索引=當前索引；
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;
}
函數 onLast()
{
if(超過尺寸>0)
{
getPageRecord(最後一頁,overSize)
document.getElementById("txtCurrPageRecord").value=overSize;
}
別的
{
getPageRecord(最後一頁,pageSize)
document.getElementById("txtCurrPageRecord").value=pageSize;
}
頁索引=最後一頁；
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
}
函數 toPage()
{
var index=document.getElementById("txtCurrPage").value
var currIndex=(index-1)*pageSize;
if(event.keyCode==13)
{
getPageRecord(currIndex,pageSize);
}
頁面索引=當前索引；
}
函數 addRow(i,dataGridId,arr)
{
var row=document.createElement("tr");
var cell=createCellWidthText(i);
row.appendChild(單元格);
for(var j=0;j<arr.length;j++)
{
單元格=createCellWidthText(arr[j]);
row.appendChild(單元格);
}
document.getElementById(dataGridId).firstChild.appendChild(row);
}
函數createCellWidthText(文本)
{
var cell = document.createElement("td");
var textNode = document.createTextNode(text);
cell.appendChild(textNode);
返回單元格；
}
函數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]);
}
}
</腳本>
<form id="form1" runat="伺服器">
<div>
<tablealign=“center”style=“border-right：#0033ff薄實線；border-top：#0033ff薄實線；
左邊框：#0033ff 薄實線；寬度：650 像素；邊框底部：#0033ff 薄實心">
<tr>
<td>
共<input id="txtPageCount" name="txtPageCount" style="width: 33px; color: #0000ff; border-top-style: none; border-right-style: none; border-left-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-顏色：透明；邊框底部樣式：無；” 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:無; 背景顏色: 白色; 邊框底部樣式: 無;" type="text" onkeydown="toPage()"/>記錄條）</td>
</tr>
<tr>
<td>
<table width="100%" id="myTable">
<tr style="background-color:Yellow">
<td樣式=“寬度：34像素；高度：21像素；”>
編號</td>
<td樣式=“寬度：34像素；高度：21像素；”>
序號</td>
<td樣式=“寬度：42像素；高度：21像素；”>
工號</td>
<td樣式=“寬度：36像素；高度：21像素；”>
姓名</td>
<td樣式=“寬度：39像素；高度：21像素；”>
性別</td>
<td樣式=“寬度：43像素；高度：21像素；”>
部門</td>
<td樣式=“寬度：50像素；高度：21像素；”>
職位</td>
<td 樣式 =“寬度：100 像素；高度：21 像素；”>
地址</td>
</tr>
</表>
</td>
</tr>
</表>
</div>
</形式>
</正文>
</html>
演示：http: //home.goofar.com/lkc311/Default.htm
