使用javascript+xml实现分页

基于web的技术中,分页是一个老的不能再老的,但大家津津乐道的问题,随着xml技术的日渐应用,把xml应用到分页当中,也是一种可能,当然网上的教程很多,当我都是看得稀里糊涂,索性自己写一个,与大家分享、指正。
共有两个文件tmh.htm & tt.xml
源代码如下:
tmh.htm


  1<html>
  2<head>
  3<title> New Document </title>
  4<meta content='\"EditPlus\"' name='\"Generator\"'/>
  5<meta content='\"\"' name='\"Author\"'/>
  6<meta content='\"\"' name='\"Keywords\"'/>
  7<meta content='\"\"' name='\"Description\"'/>
  8<link href='\"../website.css\"' rel='\"stylesheet\"' type='\"text/css\"'/>
  9</head>
 10<body>
 11<script language='\"javascript\"'>   
 12//****************变量相关定义**************   
 13//* author:海仔 *   
 14//* Email:[email protected] *   
 15//*本程序可自由传播使用,但请务必保留此信息 *   
 16//****************************************   
 17var pagenum=4; //每页显示几条信息   
 18var page=0 ;   
 19var contpage ;   
 20var BodyText=\"\";   
 21var xmlDoc = new ActiveXObject(\"Microsoft.XMLDOM\");   
 22var mode=\"member\";   
 23var toolBar;   
 24xmlDoc.async=\"false\"   
 25xmlDoc.load(\"tt.xml\")   
 26//***************这个地方是你根据实际取得的字段名称来改了   
 27header=\"<TABLE border=1><tr><td>姓名</td><td>图标</td><td>IP地址</td><td>email</td><td></td><td>日期</td><td></td><td></td></tr>\";   
 28  
 29//检索的记录数   
 30maxNum = xmlDoc.getElementsByTagName(mode).length   
 31//每条记录的列数   
 32column=xmlDoc.getElementsByTagName(mode).item(0).childNodes   
 33//每条记录的列数   
 34colNum=column.length   
 35//页数   
 36pagesNumber=Math.ceil(maxNum/pagenum)-1;   
 37pagesNumber2=Math.ceil(maxNum/pagenum);   
 38//上一个页面   
 39function UpPage(page)   
 40{   
 41thePage=\"前一页\";   
 42if(page+1>1) thePage=\"<A HREF=\'#\' onclick=\'Javascript:return UpPageGo()\'>前一页</A>\";   
 43return thePage;   
 44}   
 45function NextPage(page)   
 46{   
 47thePage=\"后一页\";   
 48if(page<pagesNumber) thePage=\"<A HREF=\'#\' onclick=\'Javascript:return NextPageGo()\'>后一页</A>\";   
 49return thePage;   
 50}   
 51  
 52function UpPageGo(){   
 53  
 54if(page>0) page--;   
 55getContent();   
 56BodyText=\"\";   
 57  
 58}   
 59//当前的页数   
 60function currentPage()   
 61{   
 62var cp;   
 63cp=\"当前是第 \"+(page+1)+\" 页\";   
 64return cp;   
 65}   
 66//总共的页数   
 67function allPage()   
 68{   
 69var ap;   
 70ap=\'总共 \'+(pagesNumber+1)+\' 页\';   
 71return ap   
 72}   
 73function NextPageGo()   
 74{   
 75if (page<pagesNumber) page++;   
 76  
 77getContent();   
 78BodyText=\"\";   
 79}   
 80  
 81//显示分页状态栏   
 82function pageBar(page)   
 83{   
 84var pb;   
 85pb=UpPage(page)+\" \"+NextPage(page)+\" \"+currentPage()+\" \"+allPage()+selectPage();   
 86return pb;   
 87}   
 88function changePage(tpage)   
 89{   
 90  
 91page=tpage   
 92if(page>=0) page--;   
 93if (page<pagesNumber) page++;   
 94getContent();   
 95BodyText=\"\";   
 96}   
 97function selectPage()   
 98{   
 99var sp;   
100sp=\"<select name=\'hehe\' onChange=\'javascript:changePage(this.options[this.selectedIndex].value)\'>\";   
101//sp=\"<select name=\'hehe\' onChange=\'alert(this.options[this.selectedIndex].value)\'>\";   
102sp=sp+\"<option value=\'\'></option>\";   
103for (t=0;t<=pagesNumber;t++)   
104{   
105sp=sp+\"<option value=\'\"+t+\"\'>\"+(t+1)+\"</option>\";   
106}   
107sp=sp+\"</select>\"   
108return sp;   
109}   
110  
111function getContent()   
112{   
113  
114if (!page) page=0;   
115n=page*pagenum;   
116endNum=(page+1)*pagenum;   
117if (endNum>maxNum) endNum=maxNum;   
118BodyText=header+BodyText;   
119for (;n<endNum;n++)   
120{   
121  
122BodyText=BodyText+\"<TR>\";   
123for (m=0;m<=colNum-1;m++)   
124{   
125mName=column.item(m).tagName;   
126BodyText=BodyText+(\"<TD>\"+xmlDoc.getElementsByTagName(mName).item(n).text+\"</TD>\");   
127}   
128BodyText=BodyText+\"</TR>\"   
129mm=\"\";   
130}   
131showhtml.innerHTML=BodyText+\"</table>\"+pageBar(page);   
132  
133BodyText=\"\"   
134}   
135</script>
136<div id='\"showhtml\"'></div>
137<script>   
138if (maxNum==0)   
139{   
140document.write(\"没有检索到合适的人才信息\")   
141}   
142else   
143{   
144getContent()   
145}   
146</script>
147</body>
148</html>

//下面是tt.xml的代码

 1<rautinee>
 2<member id="\'1\'">
 3<name>海仔</name>
 4<loginname>rautinee</loginname>
 5<email>[email protected]</email></member>
 6<member id="\'2\'">
 7<name>刚强</name>
 8<loginname>hehe</loginname>
 9<email>[email protected]</email></member>
10<member id="\'3\'">
11<name>金华刚</name>
12<loginname>nature_it</loginname>
13<email>[email protected]</email></member>
14<member id="\'4\'">
15<name>的简强</name>
16<loginname>tank</loginname>
17<email>[email protected]</email></member>
18<member id="\'7\'">
19<name>合资</name>
20<loginname>kaka</loginname>
21<email>[email protected]</email></member>
22<member id="\'6\'">
23<name>加个人</name>
24<loginname>apple</loginname>
25<email>[email protected]</email></member>
26<member id="\'8\'">
27<name>null</name>
28<loginname>sunny</loginname>
29<email>[email protected]</email></member>
30<member id="\'10\'">
31<name>宝贝</name>
32<loginname>index</loginname>
33<email>[email protected]</email></member>
34<member id="\'12\'">
35<name>null</name>
36<loginname>login</loginname>
37<email>[email protected]</email></member>
38<member id="\'13\'">
39<name>jiang</name>
40<loginname>123</loginname>
41<email>[email protected]</email></member>
42<member id="\'14\'">
43<name>null</name>
44<loginname>world</loginname>
45<email>[email protected]</email></member>
46<member id="\'15\'">
47<name>null</name>
48<loginname>swallow</loginname>
49<email>[email protected]</email></member>
50<member id="\'16\'">
51<name>魏格</name>
52<loginname>hotmail</loginname>
53<email>[email protected]</email></member>
54<member id="\'17\'">
55<name>null</name>
56<loginname>wrong</loginname>
57<email>[email protected]</email></member>
58<member id="\'18\'">
59<name>null</name>
60<loginname>leah</loginname>
61<email>[email protected]</email></member>
62<member id="\'19\'">
63<name>null</name>
64<loginname>ttth</loginname>
65<email>[email protected]</email></member>
66</rautinee>

目前好像是只支持>IE5.0
如果你有什么好的方法和改进,请来信通知我,谢谢。

ok ,just enjoy it ,and good luck

Published At
Categories with Web编程
Tagged with
comments powered by Disqus