javascript与xml实现web分页
tmh.htm为web文件 tt.xml为xml文件
以下为tmh.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <link rel="stylesheet" href="../website.css" type="text/css"> </HEAD> <BODY> <script language="javascript"> file://****************变量相关定义************** file://* author:海仔 * file://* Email:[email protected] * file://*本程序可自由传播使用,但请务必保留此信息 * file://**************************************** var pagenum=4; file://每页显示几条信息 var page=0 ; var contpage ; var BodyText=""; var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); var mode="member"; var toolBar; xmlDoc.async="false" xmlDoc.load("tt.xml") file://***************这个地方是你根据实际取得的字段名称来改了 header="<TABLE border=1><tr><td>姓名</td><td>图标</td><td>IP地址</td><td>email</td><td></td><td>日期</td><td></td><td></td></tr>";
file://检索的记录数 maxNum = xmlDoc.getElementsByTagName(mode).length file://每条记录的列数 column=xmlDoc.getElementsByTagName(mode).item(0).childNodes file://每条记录的列数 colNum=column.length file://页数 pagesNumber=Math.ceil(maxNum/pagenum)-1; pagesNumber2=Math.ceil(maxNum/pagenum); file://上一个页面 function UpPage(page) { thePage="前一页"; if(page+1>1) thePage="<A HREF='#' onclick='Javascript:return UpPageGo()'>前一页</A>"; return thePage; } function NextPage(page) { thePage="后一页"; if(page<pagesNumber) thePage="<A HREF='#' onclick='Javascript:return NextPageGo()'>后一页</A>"; return thePage; }
function UpPageGo(){
if(page>0) page--; getContent(); BodyText="";
} file://当前的页数 function currentPage() { var cp; cp="当前是第 "+(page+1)+" 页"; return cp; } file://总共的页数 function allPage() { var ap; ap='总共 '+(pagesNumber+1)+' 页'; return ap } function NextPageGo() { if (page<pagesNumber) page++;
getContent(); BodyText=""; }
file://显示分页状态栏 function pageBar(page) { var pb; pb=UpPage(page)+" "+NextPage(page)+" "+currentPage()+" "+allPage()+selectPage(); return pb; } function changePage(tpage) {
page=tpage if(page>=0) page--; if (page<pagesNumber) page++; getContent(); BodyText=""; } function selectPage() { var sp; sp="<select name='hehe' onChange='javascript:changePage(this.options[this.selectedIndex].value)'>"; file://sp="<select name='hehe' onChange='alert(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; n=page*pagenum; endNum=(page+1)*pagenum; if (endNum>maxNum) endNum=maxNum; BodyText=header+BodyText; for (;n<endNum;n++) {
BodyText=BodyText+"<TR>"; for (m=0;m<=colNum-1;m++) { mName=column.item(m).tagName; BodyText=BodyText+("<TD>"+xmlDoc.getElementsByTagName(mName).item(n).text+"</TD>"); } BodyText=BodyText+"</TR>" mm=""; } showhtml.innerHTML=BodyText+"</table>"+pageBar(page);
BodyText="" } </script>
<div id="showhtml"></div> <script> if (maxNum==0) { document.write("没有检索到合适的人才信息") } else { getContent() } </script>
</BODY> </HTML>
以下为tt.xml文件

|