新书推介:《语义网技术体系》
作者:瞿裕忠,胡伟,程龚
   >>中国XML论坛<<     W3CHINA.ORG讨论区     计算机科学论坛     SOAChina论坛     Blog     开放翻译计划     新浪微博  
 
  • 首页
  • 登录
  • 注册
  • 软件下载
  • 资料下载
  • 核心成员
  • 帮助
  •   Add to Google

    >> 本版讨论XSL,XSLT,XSL-FO,CSS等技术
    [返回] 中文XML论坛 - 专业的XML技术讨论区XML.ORG.CN讨论区 - XML技术『 XSL/XSLT/XSL-FO/CSS 』 → 直接通过xsl制作翻页,不用asp\php等怎么制作 查看新帖用户列表

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 39363 个阅读者浏览上一篇主题  刷新本主题   平板显示贴子 浏览下一篇主题
     * 贴子主题: 直接通过xsl制作翻页,不用asp\php等怎么制作 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     小鞋子 帅哥哟,离线,有人找我吗?
      
      
      威望:6
      头衔:大法師
      等级:大二期末(Java考了96分!)
      文章:353
      积分:958
      门派:XML.ORG.CN
      注册:2003/12/19

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给小鞋子发送一个短消息 把小鞋子加入好友 查看小鞋子的个人资料 搜索小鞋子在『 XSL/XSLT/XSL-FO/CSS 』的所有贴子 引用回复这个贴子 回复这个贴子 查看小鞋子的博客楼主
    发贴心情 

    (3):动态分页
    原作者:車仔

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

    材料:
    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.
    和ASP.以及FLASH.其它都不太懂.

    大家多多指教.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/4/8 16:34:00
     
     GoogleAdSense
      
      
      等级:大一新生
      文章:1
      积分:50
      门派:无门无派
      院校:未填写
      注册:2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 XSL/XSLT/XSL-FO/CSS 』的所有贴子 访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2024/5/13 1:12:07

    本主题贴数18,分页: [1] [2]

     *树形目录 (最近20个回帖) 顶端 
    主题:  直接通过xsl制作翻页,不用asp\php等怎么制作(43字) - 296458,2004年3月22日
        回复:  296458兄弟我把你的加在我的机器上,怎么老出来下面的错误“/innerweb_ver2..(250字) - miao,2005年8月18日
        回复:  运行后有问题,提示不能使用“<”,这是什么原因?(46字) - y2uan,2005年5月23日
        回复:  用<xsl:template...可以实现...分页内容在服务器端限制返回实现导航在客户端实..(139字) - yeriwei,2005年4月20日
        回复:  支持楼上的。(12字) - java99,2005年4月17日
        回复:  这种方法没多少实际意义.分页的初衷是返回少量的数据.减轻服务器/网络负担. 而这种方法只能增..(179字) - yeriwei,2005年4月13日
        回复:  有点深奥……学习中……(22字) - 殷千炀,2005年4月4日
        回复:  好东西,学习先(16字) - miniJJ,2005年4月4日
        回复:  謝謝樓主的共享精神.呵....(25字) - 小鞋子,2004年4月8日
        回复:  用javascript,我已经实现了.这是xml文件---------------------..(4066字) - 296458,2004年4月8日
        回复:  (3):动态分页原作者:車仔动机: 为了方便用户查看大批量数据,我们会用到动态分页,因此分..(7054字) - 小鞋子,2004年4月8日
        回复:  理论上应该可以实现……期待中……我觉得应该用xpointer来实现..(62字) - faly,2004年4月8日
        回复:  我测试成功了是用javascript的,在脚本中定义函数,在XSL中调用这个函数,加入一个butt..(97字) - snow00,2004年4月8日
        回复:  那你就在xsl里面放javascript吧!(30字) - 孤独,2004年3月27日
        回复:  有用xsl输出的但还是要用js...换汤不换药我好象在ibm教程网站里看过个例子是用那个什么..(123字) - faly,2004年3月27日
        回复:  但是那个是通过htm输出的,能不能直接通过xsl将xml数据输出,并且达到翻页的效果..(77字) - 296458,2004年3月24日
        回复:  http://lucky.myrice.com/xml/xpathexam2.htm看看这个h..(92字) - 孤独,2004年3月23日
        回复:  还没有考虑过这么做,不过可以试试看!(36字) - robertbiggio,2004年3月23日

    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    78.125ms