使用javascript+xml实现分页

　　基于web的技术中，分页是一个老的不能再老的，但大家津津乐道的问题，随着xml技术的日渐应用，把xml应用到分页当中，也是一种可能，当然网上的教程很多，当我都是看得稀里糊涂，索性自己写一个，与大家分享、指正。

　　共有两个文件tmh.htm & tt.xml

　　源代码如下：

　　tmh.htm

　　___________________________________________________

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

　　<HTML>

　　<HEAD>

　　<TITLE> New Document </TITLE>

　　</HEAD>

　　<BODY>

　　//****************变量相关定义**************

　　//* author:海仔 *

　　//* Email:[email protected] *

　　//*本程序可自由传播使用，但请务必保留此信息 *

　　//****************************************

　　var pagenum=4; //每页显示几条信息

　　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")

　　//***************这个地方是你根据实际取得的字段名称来改了

　　header="<TABLE border=1><tr><td>姓名</td><td>图标</td><td>IP地址</td><td>email</td><td></td><td>日期</td><td></td><td></td></tr>";

　　//检索的记录数

　　maxNum = xmlDoc.getElementsByTagName(mode).length

　　//每条记录的列数

　　column=xmlDoc.getElementsByTagName(mode).item(0).childNodes

　　//每条记录的列数

　　colNum=column.length

　　//页数

　　pagesNumber=Math.ceil(maxNum/pagenum)-1;

　　pagesNumber2=Math.ceil(maxNum/pagenum);

　　//上一个页面

　　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="";

　　}

　　//当前的页数

　　function currentPage()

　　{

　　var cp;

　　cp="当前是第 "+(page+1)+" 页";

　　return cp;

　　}

　　//总共的页数

　　function allPage()

　　{

　　var ap;

　　ap='总共 '+(pagesNumber+1)+' 页';

　　return ap

　　}

　　function NextPageGo()

　　{

　　if (page<pagesNumber) page++;

　　getContent();

　　BodyText="";

　　}

　　//显示分页状态栏

　　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)'>";

　　//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>

　　if (maxNum==0)

　　{

　　document.write("没有检索到合适的人才信息")

　　}

　　else

　　{

　　getContent()

　　}

　　</script>

　　</BODY>

　　</HTML>

　　//下面是tt.xml的代码

　　<?xml version="1.0" encoding="GB2312"?>

　　<loginName>rautinee</loginName>

　　<email>[email protected]</email></member>

　　<email>[email protected]</email></member>

　　<loginName>nature_it</loginName>

　　<email>[email protected]</email></member>

　　<email>[email protected]</email></member>

　　<email>[email protected]</email></member>

　　<loginName>apple</loginName>

　　<email>[email protected]</email></member>

　　<loginName>sunny</loginName>

　　<email>[email protected]</email></member>

　　<loginName>index</loginName>

　　<email>[email protected]</email></member>

　　<loginName>login</loginName>

　　<email>[email protected]</email></member>

　　<name>jiang</name>

　　<email>[email protected]</email></member>

　　<loginName>world</loginName>

　　<email>[email protected]</email></member>

　　<loginName>swallow</loginName>

　　<email>[email protected]</email></member>

　　<loginName>hotmail</loginName>

　　<email>[email protected]</email></member>

　　<loginName>wrong</loginName>

　　<email>[email protected]</email></member>

　　<email>[email protected]</email></member>

　　<email>[email protected]</email></member>

　　</rautinee>

　　目前好像是只支持>IE5.0

　　如果你有什么好的方法和改进，请来信通知我，谢谢。

　　ok ,just enjoy it ,and good luck

教程首页更多教程