动机:
为了方便用户查看大批量数据,我们会用到动态分页,因此分页功能是我们在网站上见过的最普遍也是最常用的一个功能模块了。而以往的信息分页都是连接到数据库的,每一次点击都必须要后台数据库的支持。这样不但服务器的负担加重,而且严重的影响用户浏览的速度.试想,如果把分页的功能放到客户端,那会产生什么样的效果呢?呵呵,看看下面的设计吧! 。
材料:
XML卷之动态分页
有2个文件:pages.xml 和pages.xsl
作用:
把分页的功能放到客户端。在不刷新页面的情况下对数据进行过滤筛选,有效的提高浏览数据功能的效率。效果:
代码:
pages.xml<?xmlversion="1.0"encoding="gb2312"?><?xml-stylesheettype="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-1117: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-0612: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-2321: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-0810: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-1316:39:05</blue_time>
<blue_class>javascript脚本</blue_class>
</team></BlueIdea>
pages.xsl
<?xmlversion="1.0"encoding="gb2312"?><xsl:stylesheetxmlns:xsl="http://www.w3.org/TR/WD-xsl"><xsl:templatematch="/"><html><head><title>XML卷之实战锦囊(3):动态分页</title><style>body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{font:12px"宋体","Arial","TimesNewRoman";}table{font-size:12px;border:0pxdouble;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:0pxsolid;}</style><script><xsl:comment><![CDATA[varOnePageNum=2;varPageNum=1;varXMLPageNum=1;functionpages(Num){stylesheet=document.XSLDocument;source=document.XMLDocument;nodes=source.documentElement.childNodes;len=nodes.length;for(i=1;i<=(len/OnePageNum);i++);XMLPageNum=i;varfirstNum=0;varlastNume=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><palign="center"><span>XML卷之实战锦囊(3):动态分页</span></p><tablealign="center"width="500"><tr><td><buttonid="cmdfirstPage"class="keybutton"onclick="pages('first');">首页</button><buttonid="cmdpreviousPage"class="keybutton"onclick="pages('previous');">上一页</button><buttonid="cmdnextPage"class="keybutton"onclick="pages('next');">下一页</button><buttonid="cmdlastPage"class="keybutton"onclick="pages('last');">尾页</button></td></tr></table><divid="Layer1"name="Layer1"><xsl:apply-templatesselect="BlueIdea"/></div></body></html></xsl:template><xsl:templatematch="BlueIdea"><tablewidth="500"border="1"align="center"cellpadding="1"cellspacing="1"bordercolordark="#ffffff"bordercolorlight="#ADAAAD"><trbgcolor="#FFCC99"align="center"><td>编号</td><td>姓名</td><td>主题</td><td>发表时间</td><td>归类</td></tr><xsl:apply-templatesselect="team"order-by="blue_ID"/></table></xsl:template><xsl:templatematch="team"><xsl:ifexpr="childnumber(this)>=1&childnumber(this)<=2"><tralign="center"><xsl:apply-templatesselect="blue_ID"/><xsl:apply-templatesselect="blue_name"/><xsl:apply-templatesselect="blue_text"/><xsl:apply-templatesselect="blue_time"/><xsl:apply-templatesselect="blue_class"/></tr></xsl:if></xsl:template><xsl:templatematch="blue_ID"><tdbgcolor="#eeeeee"><xsl:value-of/></td></xsl:template><xsl:templatematch="blue_name"><td><xsl:value-of/></td></xsl:template><xsl:templatematch="blue_text"><td><xsl:value-of/></td></xsl:template><xsl:templatematch="blue_time"><td><xsl:value-of/></td></xsl:template><xsl:templatematch="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:ifexpr="childnumber(this)>=1&childnumber(this)<=2">因此在初次onLoad的时候expr的value值是
补充一点:XML例子文件的使用方法
1)将每个例子里的两个文件按照文件名分别保存。
2)用浏览器浏览XML文件即可。这是你会看到效果,应该不错吧!
后记:
呵呵,可以增加动态排序后,再分页的功能。再把列表数变为可设置。发挥你的思维,让这些功能更加完美。大家可以研究出更好的方法来实现分页功能。互相探讨,不亦乐乎