注：由于本程序所涉及到的xml文件用于处理大数据量分页测试，文件体积较大，故没有进行上传，望读者谅解
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>浏览器兼容读取xml并进行分页</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.STYLE1 {
color: #FFFFFF;
font-weight: bold;
}
-->
</style>
</head>
<body>
<script language="javascript">
var xmlFile="test.xml";//定义xml源文件
//--------------------------建立XMLDOM对象-------------------------------//
var xmldom;
if (window.ActiveXObject){
var xmldom = new ActiveXObject("Microsoft.XMLDOM");
}
else{
if (document.implementation && document.implementation.createDocument){
var xmldom = document.implementation.createDocument("","",null);
}
}
xmldom.async = false;
xmldom.resolveExternals = false;
xmldom.validateOnParse = false;
xmldom.preserveWhiteSpace = true;
//选择合适的xmlhttprequest控件
//--------------------------建立XMLDOM对象-------------------------------//
xmldom.load(xmlFile);//加载xml文件
var mode="users";//定义xml文件中的根节点
var maxNum=0;//定义xml文件中的记录总数
maxNum=xmldom.getElementsByTagName(mode).length;//定义xml文件中的记录总数
var column;//定义xml文件中的列
column=xmldom.getElementsByTagName(mode)[0].childNodes;//获取xml文件中的列
var columnNum=0;
columnNum=column.length;//获取xml文件中的烈数
var pageNum=4;//每页显示记录数
var pagesNumber=0;//计算应分页数
pagesNumber=Math.ceil(maxNum/pageNum)-1;
var page=0 ;
var contpage;
var BodyText="";
//--------------------------定义页面显示表头-------------------------------//
var header="";
header="<table width=\"90%\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"1\" bgcolor=\"#C0C0C0\">";
header=header+"<tr><td colspan=\"5\" bgcolor=\"#80B5D7\" height=\"4\"></td></tr>";
header=header+"<tr>";
header=header+"<td width=\"20%\" height=\"30\" align=\"center\" bgcolor=\"#30559C\"><span class=\"STYLE1\">ID</span></td>";
header=header+"<td width=\"20%\" height=\"30\" align=\"center\" bgcolor=\"#30559C\"><span class=\"STYLE1\">Username</span></td>";
header=header+"<td width=\"20%\" height=\"30\" align=\"center\" bgcolor=\"#30559C\"><span class=\"STYLE1\">Password</span></td>";
header=header+"<td width=\"20%\" height=\"30\" align=\"center\" bgcolor=\"#30559C\"><span class=\"STYLE1\">Logindegree</span></td>";
header=header+"<td width=\"20%\" height=\"30\" align=\"center\" bgcolor=\"#30559C\"><span class=\"STYLE1\">State</span></td>";
header=header+"</tr>";
//--------------------------定义页面显示表头-------------------------------//
//--------------------------分页操作方法-------------------------------//
function startPage(page){
thePage="首页";
if(page>0){
thePage="<A HREF='#' onclick='Javascript:return startPageGo()'>首页</A>";
}
return thePage;
}
function prePage(page){
thePage="上一页";
if(page+1>1){
thePage="<A HREF='#' onclick='Javascript:return prePageGo()'>上一页</A>";
}
return thePage;
}
function nextPage(page){
thePage="下一页";
if(page<pagesNumber){
thePage="<A HREF='#' onclick='Javascript:return nextPageGo()'>下一页</A>";
}
return thePage;
}
function endPage(page){
thePage="末页";
if(page<pagesNumber){
thePage="<A HREF='#' onclick='Javascript:return endPageGo()'>末页</A>";
}
return thePage;
}
function startPageGo(){
page=0;
getContent();
BodyText="";
}
function prePageGo(){
if(page>0){
page--;
}
getContent();
BodyText="";
}
function nextPageGo(){
if (page<pagesNumber){
page++;
}
getContent();
BodyText="";
}
function endPageGo(){
page=pagesNumber;
getContent();
BodyText="";
}
function currentPage(){//当前的页数
var cPage;
cPage="当前是第"+(page+1)+"页";
return cPage;;
}
function allPage(){//总页数
var aPage;
aPage="总共"+(pagesNumber+1)+"页";
return aPage;
}
//--------------------------分页操作方法-------------------------------//
//--------------------------分页状态栏-------------------------------//
function pageBar(page){
var pb="";
pb=pb+"<table width=\"90%\" height=\"30\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"1\" bgcolor=\"#C0C0C0\">";
pb=pb+"<tr><td width=\"100%\" height=\"30\" colspan=\"5\" bgcolor=\"#30559C\" align=\"center\"><span class=\"STYLE1\">"+currentPage()+" "+allPage()+" "+selectPage()+"</span></td></tr>";
pb=pb+"<tr><td height=\"30\" colspan=\"5\" bgcolor=\"#30559C\" align=\"center\"><span class=\"STYLE1\">"+startPage(page)+" "+prePage(page)+" "+nextPage(page)+" "+endPage(page)+"</span></td></tr>";
pb=pb+"</table>";
return pb;
}
function changePage(tpage){
page=tpage;
if(page>=0){
page--;
}
if (page<pagesNumber){
page++;
}
getContent();
BodyText="";
}
function selectPage(){
var sp;
sp="<select name='selectPage' onChange='javascript:changePage(this.options[this.selectedIndex].value)'>";
sp=sp+"<option value=''></option>";
for (t=0;t<=pagesNumber;t++){
sp=sp+"<option value='"+t+"'>"+(t+1)+"</option>";
}
sp=sp+"</select>";
return sp;
}
//--------------------------分页状态栏-------------------------------//
//--------------------------输出内容-------------------------------//
function getContent(){
if (!page) page=0;
endNum=(page+1)*pageNum;
if (endNum>maxNum) endNum=maxNum;
BodyText=header+BodyText;
//alert(xmldom.getElementsByTagName("users")[0].getAttributeNode("username"));
for (n=page*pageNum;n<endNum;n++){
BodyText=BodyText+"<tr>";
for (m=0;m<columnNum-1;m++){
mName=column[m].tagName;
thisValue=xmldom.getElementsByTagName(mName)[n].text?xmldom.getElementsByTagName(mName)[n].text:xmldom.getElementsByTagName(mName)[n].textContent;
thisValueLink=xmldom.getElementsByTagName("link")[n].text?xmldom.getElementsByTagName("link")[n].text:xmldom.getElementsByTagName("link")[n].textContent;
if(mName=="username"){
BodyText=BodyText+("<td width=\"20%\" height=\"30\" align=\"center\" bgcolor=\"#F1F3F5\"><a href=\""+thisValueLink+"&cl=3\" target=\"_blank\">"+thisValue+"</a></td>");
}
else{
BodyText=BodyText+("<td width=\"20%\" height=\"30\" align=\"center\" bgcolor=\"#F1F3F5\">"+thisValue+"</td>");
}
}
BodyText=BodyText+"</tr>"
mm="";
}
document.getElementById("showhtml").innerHTML=BodyText+"</table>";
document.getElementById("showhtml").innerHTML=document.getElementById("showhtml").innerHTML+pageBar(page);
BodyText="";
}
//--------------------------输出内容-------------------------------//
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="showhtml"> </td>
</tr>
</table>
<script>
if (maxNum==0){
document.write("no data search!")
}
else{
getContent()
}
</script>
</body>
</html>
|