基于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