您的位置：首页 > Web前端 > JavaScript

编写了一个支持firefox和ie的javascript+xml进行数据分页的程序

2006-05-24 10:26 776 查看

注：由于本程序所涉及到的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">

</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)
.text?xmldom.getElementsByTagName(mName)
.text:xmldom.getElementsByTagName(mName)
.textContent;
thisValueLink=xmldom.getElementsByTagName("link")
.text?xmldom.getElementsByTagName("link")
.text:xmldom.getElementsByTagName("link")
.textContent;
if(mName=="username"){
BodyText=BodyText+("<td width=/"20%/" height=/"30/" align=/"center/" bg
4000
color=/"#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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript xml firefox ie header function

相关文章推荐

新的分享

章节导航