知识大全基于客户端的分页导航

Posted 2022-07-20 数字

篇首语：青年是学习智慧的时期，中年是付诸实践的时期。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全基于客户端的分页导航相关的知识，希望对你有一定的参考价值。

　　思路用纯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> tableborder<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 buttonborder:<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 显示绑定表格的数据集的最后一页记录　　技巧如果每次只显示一条记录还可以用记录集移动的方法

cha138/Article/program/Java/Javascript/201311/25260

知识大全 基于客户端的分页导航

知识大全基于客户端的分页导航