基于客户端的分页导航

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

代码示例

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

Numberprototypeadd = function(){ //对数字类型的扩展主要用于实现当数字小于一定位数时在前面补直到倍数达到为止

return (new Array(len)join()+this)slice(len) //返回字符串new Array(len)join()得到len个相连的然后和数字相加再从得到的字符串右边起向左截取len位

}

Stringprototypemlink = function(n){ //对字符类型的扩展主要用于根据文件名中的数字生成链接

return thislink(prefix+nadd()+suffix) //返回一个以字符串为链接文字prefix+nadd()+subffix为链接地址的HTML代码

} var prefix = page //文件名前缀

var suffix = //文件名后缀

var first = //第一页的文件名中的数字

var last = //最后一页的文件名中的数字

var len = //文件名中的数字的位数从以上四个变量中可知文件名为和这种形式

var cur_page = locationhrefmatch(new RegExp(prefix+(\\d+)+suffixi))[]| //从当前页面地址中查找匹配的数字

var previous = cur_page //上一页的文件名中的数字为当前页的减

var next = cur_page+ //下一页的文件名中的数字为当前页的加

if(cur_page == first) previous = first //如果当前页为首页则上一页的链接为首页

if(cur_page == last) next = last //如果当前页为尾页则下一页的链接为尾页

navbarinnerHTML = [首页mlink(first)上一页mlink(previous)下一页mlink(next)尾页mlink(last)]join( ) //在 id 为 navbar 的对象中生成导航链接

然后在各页中用<div id=navbar></div><script src=pagejs></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-tw5ol'></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 显示绑定表格的数据集的最后一页记录

技巧如果每次只显示一条记录还可以用记录集移动的方法

<xml id=oXML>

<forums> <forum>

<name>[FLASH技术交流]</name>

<moderator ><![CDATA[版主赢点儿 chenye_ holybozo ]]></moderator>

<description ><![CDATA[新手请尽管提问老手尽管来切磋让学习和帮助都成为一种乐趣]]> </description>

</forum> <forum>

<name>[Action Script讨论区]</name>

<moderator ><![CDATA[版主hnyashiro crazydevil horidream]]></moderator>

<description ><![CDATA[Action Script应用包含flash MX讨论]]> </description>

</forum> <forum>

<name>[Macromedia Studio MX 讨论学习区]</name>

<moderator ><![CDATA[版主AOL kissall 我佛山人]]></moderator>

<description ><![CDATA[交流学习Macromedia Studio MX 心得与经验欢迎提供系统教程和资料翻译新]]> </description>

</forum> <forum>

<name>[Flash动画技术区]</name>

<moderator ><![CDATA[版主歪马秀 拾荒 林℃]]></moderator>

<description ><![CDATA[中级动画爱好者进级技术版块在这里我们讨论怎样制作动画造型动作背景等制作技术 ]]> </description>

</forum> <forum>

<name>[Flash游戏技术区]</name>

<moderator ><![CDATA[版主AOL windson]]></moderator>

<description ><![CDATA[这里只讨论Flash游戏技术 ]]> </description>

</forum> <forum>

<name>[图形处理与视觉传达]</name>

<moderator ><![CDATA[版主颜志 保镖豆豆 wxb_snowwolf 风过无痕]]></moderator>

<description ><![CDATA[一切创作的基础来源于图形处理的基本功Flash也不例外喜欢这个的朋友不妨在这里交流探讨]]> </description>

</forum> <forum>

<name>[手绘艺术与角色设计]</name>

<moderator ><![CDATA[版主颜志 绯水]]></moderator>

<description ><![CDATA[手绘艺术与角色设计]]> </description>

</forum> <forum>

<name>[Flash资源共享]</name>

<moderator ><![CDATA[版主kissall 木头 CRAZYNO]]></moderator>

<description ><![CDATA[Flash相关资源和软件的交流]]> </description>

</forum> <forum>

<name>[Flash d 技术专版]</name>

<moderator ><![CDATA[版主白雪飘扬]]></moderator>

<description ><![CDATA[讨论怎样让flash里面的物体三维运动起来]]> </description>

</forum> <forum>

<name>[网页设计与编程]</name>

<moderator ><![CDATA[版主海光 我佛山人 erik]]></moderator>

<description ><![CDATA[我们讨论所有和网页设计有关的东西]]> </description>

</forum> <forum>

<name>[精品WEBSITE]</name>

<moderator ><![CDATA[版主梵天 chengleiu]]></moderator>

<description ><![CDATA[精品WEBSITE和FLASH动画的展示专版]]> </description>

</forum> <forum>

<name>[闪吧电脑学校]</name>

<moderator ><![CDATA[版主Xray 蓝蜗牛]]></moderator>

<description ><![CDATA[计算机的世界由你我来探讨你遇到的各类问题我们会帮助你（软硬兼施＋网络）]]> </description>

</forum> </forums>

</xml>

<style>

table{bordercollapse: collapse;width:px;font:normal px Tahoma;background:#EEEEEE}

button{border:px solid #;background:#EEEEEE}

</style>

<center>

<table bordercolor=# border= cellspacing=

cellpadding=>

<tr>

<td width=% rowspan= align=center valign=top><span datasrc=#oXML datafld=name /></td>

<td width=% height=><span datasrc=#oXML datafld=moderator /></td>

</tr>

<tr>

<td><span datasrc=#oXML datafld=description /></td>

</tr>

</table>

<table border= cellspacing=

cellpadding= >

<tr>

<td align=right colspan=><button onClick=oXMLrecordsetmovefirst()>首页</button><button onClick=oXMLrecordsetmoveprevious();if(oXMLrecordsetbof)oXMLrecordsetmovenext()>上一页</button><button onClick=oXMLrecordsetmovenext();if(oXMLrecordseteof)oXMLrecordsetmoveprevious()>下一页</button><button onClick=oXMLrecordsetmovelast()>尾页</button></td>

</tr>

</table>

上一篇：一段取得翻唱排行榜上歌曲名称，艺人，地址的脚本程序

下一篇：进入页面时提示将网站设为主页的代码