如何分页 基于客户端的分页导航

基于客户端的分页导航  

　　思路 用纯JS的方法 只能通过判断当前页面的文件名 然后算出上下页地址 首页和尾页需要在脚本中配置好 最后生成导航代码 用数据绑定的方法则要简单得多 设定dataPageSize 然后用 firstPage() previousPage() nextPage() 和 lastPage() 方法翻页

　　代码示例

　　 纯JS的 翻页导航的依据是文件名 page js脚本文件代码

　　Number prototype add = function(){    //对数字类型的扩展 主要用于实现当数字小于一定位数时在前面补 直到倍数达到为止 return (new Array(len) join( )+this) slice( len)  //返回字符串 new Array(len) join( )得到len个相连的 然后和数字相加 再从得到的字符串右边起向左截取len位 } String prototype mlink = function(n){    //对字符类型的扩展 主要用于根据文件名中的数字生成链接 return this link(prefix+n add ()+suffix)    //返回一个以字符串为链接文字 prefix+n add ()+subffix为链接地址的HTML代码 } var prefix = page        //文件名前缀 var suffix =        //文件名后缀 var first =         //第一页的文件名中的数字 var last =         //最后一页的文件名中的数字 var len =          //文件名中的数字的位数 从以上四个变量中可知文件名为 和 这种形式 var cur_page = location href match(new RegExp(prefix+ (\d+) +suffix i ))[ ]|       //从当前页面地址中查找匹配的数字 var previous = cur_page       //上一页的文件名中的数字为当前页的减  var next = cur_page+       //下一页的文件名中的数字为当前页的加  if(cur_page == first) previous = first    //如果当前页为首页 则上一页的链接为首页 if(cur_page == last) next = last     //如果当前页为尾页 则下一页的链接为尾页 navbar innerHTML = [ 首页 mlink(first) 上一页 mlink(previous) 下一页 mlink(next) 尾页 mlink(last)] join( )   //在 id 为 navbar 的对象中生成导航链接

　　然后在各页中用<div id= navbar ></div><script src= page js ></script>调用

　　 对表格进行数据绑定 然后用对象的翻页方法实现

　　 <xml id=<fp class='fp-gup6p'></fp>oXML<fp class='fp-dzc9d'></fp>> <forums> <forum> <name>[FLASH技术交流]</name> <moderator ><![CDATA[版主<fp class='fp-uvet9'></fp>赢点儿 chenye_<fp class='fp-5xe1s'></fp><fp class='fp-s8pmf'></fp><fp class='fp-p1kmk'></fp><fp class='fp-uqdj4'></fp> holybozo ]]></moderator> <description ><![CDATA[新手请尽管提问<fp class='fp-xqqrm'></fp>老手尽管来切磋<fp class='fp-xqqrm'></fp>让学习和帮助都成为一种乐趣<fp class='fp-vwbre'></fp>]]> </description> </forum> <forum> <name>[Action Script讨论区]</name> <moderator ><![CDATA[版主<fp class='fp-an6zc'></fp>hnyashiro crazydevil horidream]]></moderator> <description ><![CDATA[Action Script应用<fp class='fp-v32jr'></fp>包含flash MX讨论]]> </description> </forum> <forum> <name>[Macromedia Studio MX <fp class='fp-4lp15'></fp><fp class='fp-94r6c'></fp><fp class='fp-94r6c'></fp><fp class='fp-r8hhr'></fp>讨论学习区]</name> <moderator ><![CDATA[版主<fp class='fp-cbv67'></fp>AOL kissall 我佛山人]]></moderator> <description ><![CDATA[交流学习Macromedia Studio MX <fp class='fp-fb9ep'></fp><fp class='fp-94r6c'></fp><fp class='fp-l6zjj'></fp><fp class='fp-r8hhr'></fp>心得与经验<fp class='fp-qk0el'></fp>欢迎提供系统教程和资料翻译<fp class='fp-xfzp3'></fp>新]]> </description> </forum> <forum> <name>[Flash动画技术区]</name> <moderator ><![CDATA[版主<fp class='fp-n1fjq'></fp>歪马秀 拾荒 林℃]]></moderator> <description ><![CDATA[中级动画爱好者进级技术版块<fp class='fp-ye7ts'></fp>在这里我们讨论怎样制作动画造型<fp class='fp-84i1n'></fp>动作<fp class='fp-ye7ts'></fp>背景等制作技术<fp class='fp-xfzp3'></fp> ]]> </description> </forum> <forum> <name>[Flash游戏技术区]</name> <moderator ><![CDATA[版主<fp class='fp-uvet9'></fp>AOL windson<fp class='fp-fb9ep'></fp><fp class='fp-l6zjj'></fp><fp class='fp-94r6c'></fp><fp class='fp-4lp15'></fp>]]></moderator> <description ><![CDATA[这里只讨论Flash游戏技术<fp class='fp-agf7z'></fp> ]]> </description> </forum> <forum> <name>[图形处理与视觉传达]</name> <moderator ><![CDATA[版主<fp class='fp-n1fjq'></fp>颜志 保镖豆豆 wxb_snowwolf 风过无痕]]></moderator> <description ><![CDATA[一切创作的基础来源于图形处理的基本功<fp class='fp-xqqrm'></fp>Flash也不例外<fp class='fp-5gxwo'></fp>喜欢这个的朋友不妨在这里交流<fp class='fp-v72tx'></fp>探讨<fp class='fp-5gxwo'></fp>]]> </description> </forum> <forum> <name>[手绘艺术与角色设计]</name> <moderator ><![CDATA[版主<fp class='fp-an6zc'></fp>颜志 绯水]]></moderator> <description ><![CDATA[手绘艺术与角色设计]]> </description> </forum> <forum> <name>[Flash资源共享]</name> <moderator ><![CDATA[版主<fp class='fp-cbv67'></fp>kissall 木头 CRAZYNO<fp class='fp-y3fr9'></fp>]]></moderator> <description ><![CDATA[Flash相关资源和软件的交流<fp class='fp-p8bex'></fp>]]> </description> </forum> <forum> <name>[Flash <fp class='fp-19kr4'></fp>d 技术专版]</name> <moderator ><![CDATA[版主<fp class='fp-an6zc'></fp>白雪飘扬]]></moderator> <description ><![CDATA[讨论怎样让flash里面的物体三维运动起来]]> </description> </forum> <forum> <name>[网页设计与编程]</name> <moderator ><![CDATA[版主<fp class='fp-uvet9'></fp>海光 我佛山人 erik<fp class='fp-12tzr'></fp><fp class='fp-64dyu'></fp><fp class='fp-545u5'></fp>]]></moderator> <description ><![CDATA[我们讨论所有和网页设计有关的东西]]> </description> </forum> <forum> <name>[精品WEB<fp class='fp-mpfck'></fp>SITE]</name> <moderator ><![CDATA[版主<fp class='fp-n1fjq'></fp>梵天 chenglei<fp class='fp-r8hhr'></fp>u]]></moderator> <description ><![CDATA[精品WEB<fp class='fp-ldqbw'></fp>SITE和FLASH动画的展示专版]]> </description> </forum> <forum> <name>[闪吧电脑学校]</name> <moderator ><![CDATA[版主<fp class='fp-an6zc'></fp>Xray 蓝<fp class='fp-kpa9q'></fp>蜗牛]]></moderator> <description ><![CDATA[计算机的世界<fp class='fp-v32jr'></fp>由你我来探讨<fp class='fp-zrwuf'></fp>你遇到的各类问题<fp class='fp-v32jr'></fp>我们会帮助你<fp class='fp-5gxwo'></fp>（软硬兼施＋网络）]]> </description> </forum> </forums> </xml> <style> table{border<fp class='fp-ldqbw'></fp>collapse: collapse;width:<fp class='fp-64dyu'></fp><fp class='fp-iidek'></fp><fp class='fp-l6zjj'></fp>px;font:normal <fp class='fp-12tzr'></fp><fp class='fp-4lp15'></fp>px Tahoma;background:#EEEEEE} button{border:<fp class='fp-5xe1s'></fp>px solid #<fp class='fp-64dyu'></fp><fp class='fp-uqdj4'></fp><fp class='fp-uqdj4'></fp><fp class='fp-eb190'></fp><fp class='fp-u8up9'></fp><fp class='fp-uqdj4'></fp>;background:#EEEEEE} </style> <center> <table bordercolor=<fp class='fp-kuajw'></fp>#<fp class='fp-19kr4'></fp><fp class='fp-hi59v'></fp><fp class='fp-hi59v'></fp><fp class='fp-wrimx'></fp><fp class='fp-qp1oq'></fp><fp class='fp-qp1oq'></fp><fp class='fp-oowlw'></fp> border=<fp class='fp-dzc9d'></fp><fp class='fp-5xe1s'></fp><fp class='fp-oowlw'></fp> cellspacing=<fp class='fp-kuajw'></fp><fp class='fp-mdygk'></fp><fp class='fp-oowlw'></fp> cellpadding=<fp class='fp-kuajw'></fp><fp class='fp-hi59v'></fp><fp class='fp-oowlw'></fp> datasrc=<fp class='fp-kuajw'></fp>#oXML<fp class='fp-kuajw'></fp> dataPageSize=<fp class='fp-oowlw'></fp><fp class='fp-bnf31'></fp><fp class='fp-dzc9d'></fp> id=<fp class='fp-dzc9d'></fp>dTable<fp class='fp-oowlw'></fp>> <tr> <td width=<fp class='fp-gup6p'></fp><fp class='fp-fb9ep'></fp><fp class='fp-5ol'></fp>%<fp class='fp-dzc9d'></fp> rowspan=<fp class='fp-oowlw'></fp><fp class='fp-vetma'></fp><fp class='fp-dzc9d'></fp> align=<fp class='fp-oowlw'></fp>center<fp class='fp-oowlw'></fp> valign=<fp class='fp-oowlw'></fp>top<fp class='fp-kuajw'></fp>><span datafld=<fp class='fp-dzc9d'></fp>name<fp class='fp-dzc9d'></fp> /></td> <td width=<fp class='fp-kuajw'></fp><fp class='fp-w2aog'></fp><fp class='fp-rk8j9'></fp>%<fp class='fp-dzc9d'></fp> height=<fp class='fp-gup6p'></fp><fp class='fp-4lp15'></fp><fp class='fp-l6zjj'></fp><fp class='fp-kuajw'></fp>><span datafld=<fp class='fp-kuajw'></fp>moderator<fp class='fp-gup6p'></fp> /></td> </tr> <tr> <td><span datafld=<fp class='fp-gup6p'></fp>description<fp class='fp-gup6p'></fp> /></td> </tr> </table> <table border=<fp class='fp-oowlw'></fp><fp class='fp-iidek'></fp><fp class='fp-gup6p'></fp> cellspacing=<fp class='fp-oowlw'></fp><fp class='fp-94r6c'></fp><fp class='fp-oowlw'></fp> cellpadding=<fp class='fp-gup6p'></fp><fp class='fp-hi59v'></fp><fp class='fp-oowlw'></fp> > <tr> <td align=<fp class='fp-oowlw'></fp>right<fp class='fp-kuajw'></fp> colspan=<fp class='fp-dzc9d'></fp><fp class='fp-4lp15'></fp><fp class='fp-oowlw'></fp>><button onClick=<fp class='fp-oowlw'></fp>dTable<fp class='fp-agf7z'></fp>firstPage()<fp class='fp-gup6p'></fp>>首页</button><button onClick=<fp class='fp-kuajw'></fp>dTable<fp class='fp-xfzp3'></fp>previousPage()<fp class='fp-dzc9d'></fp>>上一页</button><button onClick=<fp class='fp-dzc9d'></fp>dTable<fp class='fp-kpa9q'></fp>nextPage()<fp class='fp-gup6p'></fp>>下一页</button><button onClick=<fp class='fp-kuajw'></fp>dTable<fp class='fp-p8bex'></fp>lastPage()<fp class='fp-dzc9d'></fp>>尾页</button></td> </tr> </table>

　　    [Ctrl+A 全部选择 提示 你可先修改部分代码 再按运行]

　　注意 必须设置表格的dataPageSize属性 并且数据源跟 XML 对象的 id 相对应 翻页时的对象必须跟绑定数据的表格对象相对应

　　提示 　　dataPageSize 设置或获取绑定到数据源的表格中显示的记录数　　dataSrc 设置或获取用于数据绑定的数据源　　dataFld 设置或获取由 dataSrc 属性指定的绑定到指定对象的给定数据源的字段　　firstPage 显示绑定表格的数据集的第一页记录　　previousPage 显示绑定表格的数据集的上一页记录　　nextPage 显示绑定表格的数据集的下一页记录　　lastPage 显示绑定表格的数据集的最后一页记录　　技巧 如果每次只显示一条记录 还可以用记录集移动的方法