javascript+xml技术实现分页浏览


Posted in Javascript onJuly 27, 2008

共有两个文件tmh.htm & tt.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">  
//****************变量相关定义**************  
//* author:海仔  *  
//* Email:rautinee@21cn.com *  
//*本程序可自由传播使用,但请务必保留此信息*  
//****************************************  
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>  
<div id="showhtml"></div>  
<script>  
if (maxNum==0)  
 {  
 document.write("没有检索到合适的人才信息")  
 }  
 else  
 {  
 getContent()  
 }  
</script>  
</BODY>  
</HTML> 

//下面是tt.xml的代码

<?xml version="1.0" encoding="GB2312"?>  
<rautinee>  
<member id='1'>  
<name>海仔</name>  
<loginName>rautinee</loginName>  
<email>rautinee@btamail.net.cn</email></member>  
<member id='2'>  
<name>刚强</name>  
<loginName>hehe</loginName>  
<email>rautinee@chinamanagers.com</email></member>  
<member id='3'>  
<name>金华刚</name>  
<loginName>nature_it</loginName>  
<email>rautinee_sea@hotmail.com</email></member>  
<member id='4'>  
<name>的简强</name>  
<loginName>tank</loginName>  
<email>tank@163.com</email></member>  
<member id='7'>  
<name>合资</name>  
<loginName>kaka</loginName>  
<email>kaka@eyou.com</email></member>  
<member id='6'>  
<name>加个人</name>  
<loginName>apple</loginName>  
<email>apple@163.com</email></member>  
<member id='8'>  
<name>null</name>  
<loginName>sunny</loginName>  
<email>rautinee@eyou.com</email></member>  
<member id='10'>  
<name>宝贝</name>  
<loginName>index</loginName>  
<email>rautinee@21cn.com</email></member>  
<member id='12'>  
<name>null</name>  
<loginName>login</loginName>  
<email>webmaster@chinamanagers.com</email></member>  
<member id='13'>  
<name>jiang</name>  
<loginName>123</loginName>  
<email>japing@chianmanagers.com</email></member>  
<member id='14'>  
<name>null</name>  
<loginName>world</loginName>  
<email>rautinee@21cn.com</email></member>  
<member id='15'>  
<name>null</name>  
<loginName>swallow</loginName>  
<email>swallow@chinamanagers.com</email></member>  
<member id='16'>  
<name>魏格</name>  
<loginName>hotmail</loginName>  
<email>rautinee_sea@hotmail.com</email></member>  
<member id='17'>  
<name>null</name>  
<loginName>wrong</loginName>  
<email>wrong@chinamanagers.com</email></member>  
<member id='18'>  
<name>null</name>  
<loginName>leah</loginName>  
<email>leah@chinamanagers.com</email></member>  
<member id='19'>  
<name>null</name>  
<loginName>ttth</loginName>  
<email>rautinee@21cn.com</email></member>  
</rautinee>  

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

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

Javascript 相关文章推荐
基于jquery的动态创建表格的插件
Apr 05 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 #Javascript
发一个自己用JS写的实用看图工具实现代码
Jul 26 #Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 #Javascript
js树形控件脚本代码
Jul 24 #Javascript
js类中的公有变量和私有变量
Jul 24 #Javascript
javascript IE中的DOM ready应用技巧
Jul 23 #Javascript
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 #Javascript
You might like
PHP导入Excel到MySQL的方法
2011/04/23 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
Js实现自定义右键行为
2015/03/26 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
简明 Python 基础学习教程
2007/02/08 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python实现的密码强度检测器示例
2017/08/23 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Python编程中类与类的关系详解
2019/08/08 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
群胜软件Java笔试题
2012/09/29 面试题
班级活动策划书
2014/02/06 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
基层党员对照检查材料
2014/08/25 职场文书
党支部鉴定意见
2015/06/02 职场文书
警示教育片观后感
2015/06/17 职场文书