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 相关文章推荐
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 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
关于手调机和数调机的选择
2021/03/02 无线电
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
php数组分页实现方法
2016/04/30 PHP
Yii核心验证器api详解
2016/11/23 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
经管应届生求职信
2013/11/17 职场文书
物业管理员岗位职责范文
2013/11/25 职场文书
服务员岗位责任制
2014/02/11 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
Python Numpy库的超详细教程
2022/04/06 Python