|
<!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
Xml_javascript分页 |
