当前位置: 首页 > 图文教程 > XML家族 > XML > 使用javascript+xml技术实现分页浏览

XML
XML简易教程之四
XML与HTML的结合（上）
XML与HTML的结合（下）
XML入门的常见问题(一)
XML入门的常见问题(二)
XMLHTTP资料
什么是XML
什么是 XML Web Service
XML正在接管Web服务 成为SOA的基础
怎么样在网页上读取远程xml的数据
XML教程—编写结构完整的XML文档
读写xml文件的2个小函数
XML文档的基本操作
初学者如何开发出一个高质量的J2EE系统
优化 JavaScript 代码
自动更新程序的设计框架
使Firefox对XML的处理兼容IE的节点处理方法
WML学习之四 锚和任务
WML学习之五 显示表单
WML学习之六 事件

No. « 17 18 19 20 »

技术文章搜索

关键字

XML 中的 使用javascript+xml技术实现分页浏览

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-17   浏览: 91 ::
收藏到网摘: n/a

基于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>
<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:[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>
<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>[email protected]</email></member>
<member id='2'>
<name>刚强</name>
<loginName>hehe</loginName>
<email>[email protected]</email></member>
<member id='3'>
<name>金华刚</name>
<loginName>nature_it</loginName>
<email>[email protected]</email></member>
<member id='4'>
<name>的简强</name>
<loginName>tank</loginName>
<email>[email protected]</email></member>
<member id='7'>
<name>合资</name>
<loginName>kaka</loginName>
<email>[email protected]</email></member>
<member id='6'>
<name>加个人</name>
<loginName>apple</loginName>
<email>[email protected]</email></member>
<member id='8'>
<name>null</name>
<loginName>sunny</loginName>
<email>[email protected]</email></member>
<member id='10'>
<name>宝贝</name>
<loginName>index</loginName>
<email>[email protected]</email></member>
<member id='12'>
<name>null</name>
<loginName>login</loginName>
<email>[email protected]</email></member>
<member id='13'>
<name>jiang</name>
<loginName>123</loginName>
<email>[email protected]</email></member>
<member id='14'>
<name>null</name>
<loginName>world</loginName>
<email>[email protected]</email></member>
<member id='15'>
<name>null</name>
<loginName>swallow</loginName>
<email>[email protected]</email></member>
<member id='16'>
<name>魏格</name>
<loginName>hotmail</loginName>
<email>[email protected]</email></member>
<member id='17'>
<name>null</name>
<loginName>wrong</loginName>
<email>[email protected]</email></member>
<member id='18'>
<name>null</name>
<loginName>leah</loginName>
<email>[email protected]</email></member>
<member id='19'>
<name>null</name>
<loginName>ttth</loginName>
<email>[email protected]</email></member>
</rautinee>


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

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