Page d'accueil>Tutoriel de programmation réseau>Tutoriel XML

Pagination XML_javascript

Auteur：Eve Cole Date de mise à jour：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 " >
<tête>
<title>龙的传人--Xml_javascript分页</title>

</tête>
<body onload="getxmlDoc()">
<langage de script="javascript" type="text/javascript">
var xmlDoc;
varnoeudIndex;
varpageIndex;
var taillepage=13;
var dernièrePage; //最后一页
var overSize //最后一页的记录数
fonction getxmlDoc()
{
xmlDoc=nouveau ActiveXObject("Microsoft.XMLDOM");
var currNode ;
xmlDoc.async=false ;
xmlDoc.load("monTest.xml");
si(xmlDoc.parseError.errorCode!=0)
{
var myErr=xmlDoc.parseError;
alert("出错！"+myErr.reason);
}
getRecordCount();
onPremier();

}
fonction 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;
si (surTaille>0)
{
lastPage=recordCount-overSize;
}
autre
{
lastPage=recordCount-pageSize;
}

}
fonction getPageRecord (pageIndex, pageSize)
{
clearRow("maTable");
var personNode= xmlDoc.selectNodes("/Root")[0];
var currNode=personNode.childNodes[pageIndex];
pour(var i=pageIndex;i<pageIndex+pageSize;i++)
{
var arr=nouveau tableau();
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,"maTable",arr);
}
}
fonction onFirst()
{
indexpage=0 ;
var currIndex=pageIndex;
getPageRecord(currIndex,pageSize)
pageIndex=currIndex ;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;
}
fonction onPrev()
{
var currIndex=pageIndex;
currIndex-=pageSize;
getPageRecord(currIndex,pageSize)
pageIndex=currIndex;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;

}
fonction onNext()
{
var currIndex=pageIndex;
currIndex+=pageSize;
getPageRecord(currIndex,pageSize)
pageIndex=currIndex;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;

}
fonction onLast()
{
si (surTaille>0)
{
getPageRecord(dernièrePage,overSize)
document.getElementById("txtCurrPageRecord").value=overSize;
}
autre
{
getPageRecord(dernièrePage,pageSize)
document.getElementById("txtCurrPageRecord").value=pageSize;
}
pageIndex=dernièrePage;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
}
fonction versPage()
{
var index=document.getElementById("txtCurrPage").value
var currIndex=(index-1)*pageSize;
si(event.keyCode==13)
{
getPageRecord(currIndex,pageSize);
}
pageIndex=currIndex;
}
fonction addRow (i, dataGridId, arr)
{
var row=document.createElement("tr");
var cell=createCellWidthText(i);
rangée.appendChild(cellule);
pour(var j=0;j<arr.length;j++)
{
cell=createCellWidthText(arr[j]);
rangée.appendChild(cellule);
}
document.getElementById(dataGridId).firstChild.appendChild(row);
}
fonction createCellWidthText (texte)
{
var cell = document.createElement("td");
var textNode = document.createTextNode(text);
cell.appendChild(textNode);
cellule de retour ;
}
fonction clearRow(obj)
{
var table=document.getElementById(obj);
var nodeTbody=table.firstChild
var longueur=nodeTbody.childNodes.length;
pour(var i=longueur-1;i>0;i--)
{
nodeTbody.removeChild(nodeTbody.childNodes[i]);
}
}
</script>
<form id="form1" runat="serveur">
<div>
<table align="center" style="border-right : #0033ff mince solide ; border-top : #0033ff mince solide ;
bordure gauche : #0033ff mince solide ; largeur : 650 px ; bordure inférieure : #0033ff mince solide">
<tr>
<td>
共<input id="txtPageCount" name="txtPageCount" style="width : 33px ; couleur : #0000ff ; border-top-style : aucun ; border-right-style : aucun ; border-left-style : aucun ; arrière-plan -color : transparent ; border-bottom-style : aucun ;" type="text" onkeydown="toPage()"/>页/
<input id="txtRecordCount" name="txtRecordCount" style="width : 46px ; couleur : #3300ff ; border-top-style : aucun ; border-right-style : aucun ; border-left-style : aucun ; background- couleur : transparent ; style de bordure : aucun ; 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="largeur : 46px ; couleur : #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: aucun ; couleur d'arrière-plan : blanc ; style de bordure : aucun ; " type="text" onkeydown="toPage()"/>条记录）</td>
</tr>
<tr>
<td>
&nbsp;<table width="100%" id="myTable">
<tr style="background-color:Jaune">
<td style="largeur : 34px ; hauteur : 21px;">
Identifiant</td>
<td style="largeur : 34px ; hauteur : 21px;">
序号</td>
<td style="largeur : 42px; hauteur : 21px;">
工号</td>
<td style="largeur : 36px; hauteur : 21px;">
姓名</td>
<td style="largeur : 39px; hauteur : 21px;">
性别</td>
<td style="largeur : 43px; hauteur : 21px;">
部门</td>
<td style="largeur : 50px; hauteur : 21px;">
职位</td>
<td style="largeur : 100px; hauteur : 21px;">
地址</td>
</tr>
</table>
</td>
</tr>
</table>

</div>
</form>
</corps>
</html>
Description : http://home.goofar.com/lkc311/Default.htm
Articles connexes