`
hereson
  • 浏览: 1453789 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

XML卷之动态分页

    博客分类:
  • vbs
阅读更多

动机: 
为了方便用户查看大批量数据,我们会用到动态分页,因此分页功能是我们在网站上见过的最普遍也是最常用的一个功能模块了。而以往的信息分页都是连接到数据库的,每一次点击都必须要后台数据库的支持。这样不但服务器的负担加重,而且严重的影响用户浏览的速度.
试想,如果把分页的功能放到客户端,那会产生什么样的效果呢?呵呵,看看下面的设计吧!  

材料: 
XML卷之动态分页
有2个文件:pages.xml 和 pages.xsl 

作用: 
把分页的功能放到客户端。在不刷新页面的情况下对数据进行过滤筛选,有效的提高浏览数据功能的效率。 
效果: 
浏览这里 
pages.xml 

程序代码: [ 复制代码到剪贴板 ]

<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="pages.xsl" ?>
<BlueIdea>
<team>
<blue_ID>1</blue_ID>
<blue_name>Sailflying</blue_name>
<blue_text>一个简单的分页</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>XML专题</blue_class>
</team>
<team>
<blue_ID>2</blue_ID>
<blue_name>flyingbird</blue_name>
<blue_text>嫁给你,是要你疼的</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>灌水精华</blue_class>
</team>
<team>
<blue_ID>3</blue_ID>
<blue_name>苛子</blue_name>
<blue_text>正则表达式在UBB论坛中的应用</blue_text>
<blue_time>2001-11-23 21:02:16</blue_time>
<blue_class>Web 编程精华</blue_class>
</team>
<team>
<blue_ID>4</blue_ID>
<blue_name>太乙郎</blue_name>
<blue_text>年末经典分舵聚会完全手册 v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>论坛灌水区</blue_class>
</team>
<team>
<blue_ID>5</blue_ID>
<blue_name>mmkk</blue_name>
<blue_text>Asp错误信息总汇</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>javascript脚本</blue_class>
</team>
</BlueIdea> 




pages.xsl 

程序代码: [ 复制代码到剪贴板 ]
<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl="
http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<title> XML卷之实战锦囊(3):动态分页</title>
<style>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ font: 12px "宋体", "Arial", "Times New Roman"; } 
table { font-size: 12px; border: 0px double; border-color: #99CC99 #99CC99 #CCCCCC #CCCCCC; cellpadding:3;cellspacing:3; bgcolor:#eeeeee; text-decoration: blink} 
span { font-size: 12px; color: red; }
.keybutton { cursor:hand; font-size: 12px; color: #003300; background: #ffffff; border: 0px solid;}
</style>
<script> 
<xsl:comment> 
<![CDATA[ 
var OnePageNum=2; 
var PageNum=1; 
var XMLPageNum=1; 
function pages(Num) 

stylesheet=document.XSLDocument; 
source=document.XMLDocument; 
nodes=source.documentElement.childNodes; 
len=nodes.length; 
for(i=1;i<=(len/OnePageNum);i++); 
XMLPageNum=i; 
var firstNum=0; 
var lastNume=0; 

if (Num=="first") {PageNum=1;} 
if (Num=="previous") {if (PageNum>1) PageNum -=1;} 
if (Num=="next") {if (PageNum<XMLPageNum) PageNum +=1;} 
if (Num=="last") {PageNum =XMLPageNum;} 

sortField=document.XSLDocument.selectSingleNode("//@expr"); 
firstNum=OnePageNum*(PageNum-1)+1; 
lastNum=OnePageNum*(PageNum-1)+OnePageNum; 
text="childnumber(this)>="+firstNum+" & childnumber(this)<="+lastNum; 
sortField.value=text; 
Layer1.innerHTML=source.documentElement.transformNode(stylesheet); 

]]> 
</xsl:comment> 
</script>
</head>


程序代码: [ 复制代码到剪贴板 ]
<body>
<p align="center"><span>XML卷之实战锦囊(3):动态分页</span></p> 
<table align="center" width="500" > 
<tr> 
<td> 
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >首页</button> 
<button id="cmdpreviousPage" class="keybutton" onclick="pages('previous');" >上一页</button>
<button id="cmdnextPage" class="keybutton" onclick="pages('next');">下一页</button> 
<button id="cmdlastPage" class="keybutton" onclick="pages('last');">尾页</button> 
</td> 
</tr> 
</table> 
<div id="Layer1" name="Layer1"> <xsl:apply-templates select="BlueIdea" /></div> 
</body>


程序代码: [ 复制代码到剪贴板 ]
</html>
</xsl:template>
<xsl:template match="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="center">
<td>编号</td>
<td>姓名</td>
<td>主题</td>
<td>发表时间</td>
<td>归类</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_ID"/>
</table>
</xsl:template>
<xsl:template match="team">
<xsl:if expr="childnumber(this)&gt;=1 &amp; childnumber(this)&lt;=2 ">
<tr align="center">
<xsl:apply-templates select="blue_ID" />
<xsl:apply-templates select="blue_name" />
<xsl:apply-templates select="blue_text" />
<xsl:apply-templates select="blue_time" />
<xsl:apply-templates select="blue_class" />
</tr>
</xsl:if> 
</xsl:template>
<xsl:template match="blue_ID">
<td bgcolor="#eeeeee">
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_name">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_text">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_time">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_class">
<td>
<xsl:value-of />
</td>
</xsl:template>
</xsl:stylesheet>




讲解: 
1)search.xml 是数据文件,相信大家都不会有问题。
2)search.xsl 是格式文件,有几个地方要注意。

(1)脚本中:

nodes=source.documentElement.childNodes;
作用是:找到所有的节点。nodes.length就是符合条件的总节点数 

sortField=document.XSLDocument.selectSingleNode("//@expr");
作用是:找到有属性为expr的第一个节点,因此它对应的节点就是
<xsl:if expr="childnumber(this)&gt;=1 &amp; childnumber(this)&lt;=2 ">
因此在初次onLoad的时候expr的value值是
childnumber(this)<=1 & childnumber(this)>=2
关于 &gt; &lt; 大家可能熟悉多了。那&amp;是什么呢? 它就是“与”了.
大家可以在XML的书中找到其它的一些。


参数说明:
OnePageNum:每页显示的数据数
PageNum:当前页数
XMLPageNum:总页数
firstNum:当前页的第一条数据值
lastNum:当前页的最后一条数据值


(2)文本中:

<xsl:if expr="childnumber(this)&gt;=1 &amp; childnumber(this)&lt;=2 ">
在分页中我们需要输出合适的数据,,因此我们用一个 if 判断条件来控制。
在初始的时候我们要求只输出最前的两个节点的数值。

childnumber(this)
作用:返回当前节点在它的上级节点列表中的编号,列表中的第一个节点默认编号为1。
在分页中我们就是根据节点的编号来判断它属于第几页。
expr
不知道大家发现没有,前两次我们用到的都是 test ,可这个我们用的却是expr。
它们之间有一定的区别,用法也不相同。
expr ── 脚本语言表达式,计算结果为"真"或"假";如果结果为"真",且通过test,则在输出中显示其中内容(可省略此项属性)。 
test ── 源数据测试条件。 

程序代码: [ 复制代码到剪贴板 ]
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >首页</button> 

作用是让数据回到最前一页。其它按钮的作用类似。


补充一点: XML例子文件的使用方法

1)将每个例子里的两个文件按照文件名分别保存。
2)用浏览器浏览XML文件即可。这是你会看到效果,应该不错吧! 


后记: 
呵呵,可以增加动态排序后,再分页的功能。再把列表数变为可设置。发挥你的思维,让这些功能更加完美。大家可以研究出更好的方法来实现分页功能。互相探讨,不亦乐乎! 

分享到:
评论

相关推荐

    XML考试系统

    DeleteTest 删除试题 &lt;br&gt;DeleteUser 删除用户 &lt;br&gt;GetTestbean 获取试题 Bean &lt;br&gt;InsertTest 增加试题 &lt;br&gt;TestPage 试题列表分页显示 &lt;br&gt;TestsPage 试卷列表分页显示 &lt;br&gt;...

    JSP分页标签,方便JSP开发

    在Web开发领域,JSP(JavaServer Pages)是一种常见的技术,用于创建动态、交互式的网页。在处理大量数据时,分页是必不可少的功能,它帮助用户分块浏览内容,提高用户体验。本文将深入探讨JSP分页标签及其使用方法...

    JAVA JSP 实现 信息办公 XML考试系统

    TestPage 试题列表分页显示 TestsPage 试卷列表分页显示 UpdateTest 跟新试题内容 UserPage 用户列表分页显示 Com.gton.servlet.web.* CheckLogin 登陆验证 Reg 注册 SelectTest 随机出题 ...

    JAVA-JSP EIMS系统-OA子系统的设计与开发(源代码+论文)

    本系统拥有以下功能: ... CreateTests 生成试卷 DeleteTests 删除试卷 DeleteTest 删除试题 DeleteUser 删除用户 GetTestbean 获取试题Bean InsertTest 增加试题 TestPage 试题列表分页显示 ... MyXML XML操作类

    ASP.NET开发实战1200例(第Ⅰ卷)第十二章

    实例308 通过JavaScript操作XML文档并分页 显示 486 实例309 通过JavaScript控制循环不间断播放 图片 487 实例310 利用javaScript控制Flash播放和停止 488 12.4 应用JavaScript实现Web打印 功能 490 实例311 调用IE...

    ASP.NET 3.5揭秘(卷2).pdf

    - **ASP.NET AJAX**:通过JavaScript和XML技术提高Web应用程序的响应性和用户体验。 - **ASP.NET Dynamic Data**:一种快速构建数据驱动Web应用程序的方法,支持自动数据验证、分页等功能。 - **ASP.NET MVC**:...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    传统的分页方式,多数是通过单击按钮的方式来显示分页的。利用Ajax可以通过使用滑块的滑动来选择所显示的分页,这种拖拽的方式有很好的用户体验。 /test.html 滑动显示分页页面 /js JavaScript脚本...

    ASP.NET实训实验报告

    而在考场抽卷环节,我们生成XML文件存储试卷信息,并按照组卷方案进行试题插入,这涉及到了XML文件的操作和管理。 此外,我们还运用了FunshionChart进行图表展示,增强了成绩管理和数据分析的可视化。利用Ajax实现...

    java ssm考试组卷管理系统毕业论文+ppt .rar

    7. **性能优化**:讨论了缓存技术(如Redis)的使用、分页查询优化、数据库连接池的配置等提高系统性能的方法。 8. **系统测试**:进行了单元测试、集成测试,确保每个功能的正确性,并可能包含了性能测试来验证...

    Java典型应用彻查1000例第四卷:数据库应用基础(源码+PPT+习题).rar

    10. 分页查询与结果集处理:Java可以通过Limit子句(在某些JDBC驱动中支持)或自定义SQL实现分页查询,同时,ResultSet接口提供了遍历和处理查询结果的方法。 11. 异常处理:在数据库操作中,可能出现SQLException...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例231 文本文件的分页读取 298 4.4 文件操作 300 实例232 文件操作汇总 300 实例233 目录、文件定位器 302 实例234 改头换面 303 实例235 文件属性分析 304 实例236 文件类型检测 306 实例237 判断文件的权限 308 ...

    WIMtool v1.09.10.01 x86

    新的映像卷时,WimTool会自动检测原映像文件的压缩类型,并使新加入的映像卷与之匹配。 3、支持挂载和卸载Wim文件。用WimTool挂载Wim文件时,用户可以选择指定的映像文件和挂载目录,同时也可指定 挂载方式(是否可写...

Global site tag (gtag.js) - Google Analytics