Spry框架实现XML分页[原]

Spry是DW CS3自带的一个javascript框架，其封装了许多以往需要用手写脚本来完成的工作，在一定程度上来说，使用熟练了还是蛮方便的，毕竟这是流行的三大脚本框架之一，在实现Ajax方面也有很独到的地方。

这里例举出使用Spry框架来操作XML实现分页的功能！

实现xml分页这里只需要用到框架中的三个js文件即可SpryData.js、xpath.js和SpryPagedView.js，其中SpryPagedView.js是其后续补丁中提供的一个js库，而前面的两个js库则在安装落伍Spry框架之后可以在安装文件中查找到！

这三个js文件大家可以自己到官方网站等许多地方下载到，这里就不提供了！

用于分页的xml文件DataSourceHuashanlin.xml

<? xml version="1.0" encoding="utf-8" ?>
< Messages >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火 </ title >
      < url > http://www.ba5idu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世 </ title >
      < url > http://www.baid54u.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓 </ title >
      < url > http://www.baidu4.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净” </ title >
      < url > http://www.baidu2.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可 </ title >
      < url > http://www.bai12du.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华 </ title >
      < url > http://www.bai21du.com </ url >  
   </ message >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火2 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世2 </ title >
      < url > http://www.ba8idu.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓2 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净”2 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可2 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华2 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火3 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世3 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓3 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净”3 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可3 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华3 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火4 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世4 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓4 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净”4 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可4 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华4 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火5 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世5 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓5 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净”5 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可5 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华5 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火6 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世6 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓6 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净”6 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可6 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华6 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火7 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世7 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓7 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净”7 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可7 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华7 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火8 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世8 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓8 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净”8 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可8 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华8 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火9 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世9 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓9 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净”9 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可9 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华9 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火10 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世10 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓10 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净”10 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可10 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华10 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火11 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世11 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓11 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净”11 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可11 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华11 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火12 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世12 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓12 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净”12 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可12 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华12 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火13 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世13 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓13 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净”13 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可13 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华13 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火14 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世14 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓14 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净”14 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可14 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华14 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > “祥云”绕峨眉川歌迎圣火15 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 诺贝尔文学奖得主索尔仁尼琴去世15 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 肖余恨：安徽砀山两风办越牛人治痕迹越浓15 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 和总理一起“保证北京永远干净”15 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 官员公布电话以体民意 问题解决非省长不可15 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
   < message >
      < title > 美国总统候选人奥巴马竞选飞机揭秘：极尽豪华15 </ title >
      < url > http://www.baidu.com </ url >  
   </ message >
</ Messages >

pager1.html

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > SpryXML </ title >
< style  type ="text/css" >
ul { text-align : left ;
list-style : none ;
}
span {
cursor : hand ;
}
</ style >
< script  src ="SpryAssets/xpath.js"  type ="text/javascript" ></ script >
< script  src ="SpryAssets/SpryData.js"  type ="text/javascript" ></ script >
< script  src ="SpryAssets/SpryPagedView.js"  type ="text/javascript" ></ script >
< script  type ="text/javascript" >
<!--
function  MadeCheckPage(rowsCount)
{
     var  temp = " <select name='pag' onchange='pageview.goToPage(this.value);' " ;
     for ( var  i = 0 ;i <= rowsCount;i ++ )
    {
        temp += " <option value=' " + i + " '> " + i + " </option> " ;
    }
    temp += " </select> " ;
     return  temp;
}
function  check(SelectName,OptionValue)
{
     for  ( var  i = 0 ;i < SelectName.options.length ;i ++  )
    {
         if  (SelectName.options(i).value == OptionValue)
        {
            SelectName.selectedIndex  = i;
        }
    }
}


var  a = 0 ;
var  doc  =   new  Spry.Data.XMLDataSet( " DataSource2.xml " ,  " Messages/message " ,{useCache: false });

var  pageview = new  Spry.Data.PagedView(doc,{pageSize: 10 ,forceFullPages: true });

var  pageinfo = pageview.getPagingInfo();

// -->
</ script >
</ head >

< body >
< div  id ="warp"  spry:region ="pageview" >
     < ul  spry:repeatchildren ="pageview" >
         < li >< a  href ="{url}" > {title} </ a ></ li >
     </ ul >
</ div >
< span  onclick ="pageview.firstPage();" > 首 页 </ span >
< span  onclick ="pageview.previousPage();" > 上一页 </ span >
< span  onclick ="pageview.nextPage();" > 下一页 </ span >
< span  onclick ="pageview.lastPage();" > 末 页 </ span >

< div  id ="PG" ></ div >
< p  spry:region ="pageinfo" >
< script  type ="text/javascript" >
document.getElementById( " PG " ).innerHTML = MadeCheckPage({ds_RowCount});
var  ou = {ds_CurrentRowNumber};
var  cc = document.getElementById( " pag " );
// check(cc,ou+1);
cc.selectedIndex = ou;
</ script >
当前第{ds_CurrentRowNumber}页 总{ds_RowCount}页
</ p >

</ body >
</ html >

pager2.html

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 无标题文档 </ title >
< style  type ="text/css" >
   ul { margin : 0px ; text-align : left ; }
   .border {
       border : 2px solid #666666 ;
       padding : 5px ;
    }
   .aOdd {
   background-color : #FFCC99 ;
    }
   .aHover {
   background-color : #33CCFF ;
    }
   .aSelected {
   background-color : #CCCCCC ;
    }
</ style >
< script  src ="SpryAssets/xpath.js"  type ="text/javascript" ></ script >
< script  src ="SpryAssets/SpryData.js"  type ="text/javascript" ></ script >
< script  src ="SpryAssets/SpryPagedView.js"  type ="text/javascript" ></ script >

< script  type ="text/javascript" >
var  ds1  =   new  Spry.Data.XMLDataSet( " DataSource2.xml " ,  " Messages/message " );
var  pv1  =   new  Spry.Data.PagedView(ds1,{pageSize: 12 , forceFullPages: false , useZeroBasedIndexes: false });
var  pvInfo  =  pv1.getPagingInfo();
</ script >

</ head >
< body >

< div  class ="border" >
< ul  spry:region ="pv1"  spry:repeatchildren ="pv1" >
   < li  spry:odd ="aOdd"  spry:hover ="aHover"  spry:select ="aSelected" >< a  href ="{url}" > {title} </ a ></ li >
</ ul >
</ div >

< p  spry:region ="pvInfo"  spry:repeatchildren ="pvInfo" >
    < a  spry:if ="{ds_CurrentRowNumber} != {ds_RowNumber}"  href ="#"  onclick ="pv1.goToPage('{ds_PageNumber}')" > {ds_PageNumber} </ a >
    < span  spry:if ="{ds_CurrentRowNumber} == {ds_RowNumber}"  class ="currentPage" > {ds_PageNumber} </ span >
</ p >
</ body >
</ html >