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>
</head>
<body onload="getxmlDoc()">
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
var xmlDoc;
var 노드 인덱스;
var 페이지 인덱스;
var 페이지 크기=13;
var 마지막 페이지; //最后一页
var overSize //最后一页的记录数
함수 getxmlDoc()
{
xmlDoc=새 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)
{
lastPage=recordCount-overSize;
}
또 다른
{
lastPage=recordCount-pageSize;
}
}
함수 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=새 배열();
var nNode= xmlDoc.selectSingleNode("루트/사람["+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=pageIndex;
getPageRecord(currIndex,pageSize)
pageIndex=currIndex ;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;
}
onPrev() 함수
{
var currIndex=pageIndex;
currIndex-=페이지 크기;
getPageRecord(currIndex,pageSize)
pageIndex=currIndex;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;
}
onNext() 함수
{
var currIndex=pageIndex;
currIndex+=페이지크기;
getPageRecord(currIndex,pageSize)
pageIndex=currIndex;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;
}
onLast() 함수
{
if(크기 초과>0)
{
getPageRecord(마지막 페이지,overSize)
document.getElementById("txtCurrPageRecord").value=overSize;
}
또 다른
{
getPageRecord(마지막 페이지, 페이지 크기)
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);
}
pageIndex=currIndex;
}
함수 addRow(i,dataGridId,arr)
{
var row=document.createElement("tr");
var cell=createCellWidthText(i);
row.appendChild(셀);
for(var j=0;j<arr.length;j++)
{
cell=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 길이=nodeTbody.childNodes.length;
for(var i=길이-1;i>0;i--)
{
nodeTbody.removeChild(nodeTbody.childNodes[i]);
}
}
</script>
<form id="form1" runat="서버">
<div>
<table align="center" style="border-right: #0033ff 얇은 실선; border-top: #0033ff 얇은 실선;
테두리 왼쪽: #0033ff 얇은 실선; 너비: 650px; border-bottom: #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; 배경- 색상: 투명; 테두리 하단 스타일: 없음; 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="너비: 46px; 색상: #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="배경색:노란색">
<td 스타일="너비: 34px; 높이: 21px;">
아이디</td>
<td 스타일="너비: 34px; 높이: 21px;">
序号</td>
<td 스타일="너비: 42px; 높이: 21px;">
工号</td>
<td 스타일="너비: 36px; 높이: 21px;">
이름</td>
<td 스타일="너비: 39px; 높이: 21px;">
섹스</td>
<td 스타일="너비: 43px; 높이: 21px;">
부분</td>
<td 스타일="너비: 50px; 높이: 21px;">
职位</td>
<td 스타일="너비: 100px; 높이: 21px;">
땅</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
링크: http://home.goofar.com/lkc311/Default.htm