您当前位置：首页 > web前端 > jscript > javascript分页类支持页码格式

javascript分页类支持页码格式

来源：程序员人生发布时间：2013-12-11 17:30:09 阅读次数：2523次

前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然后在载入的时候进行分页，网上很多jquery,property等都实现了，但是他们插件的附属功能很多又不需要，而且没必要就为了这么一个功能区引用这个库，为速度考虑吧，当然你服务器好也行，但是其实这个效果不是必须的，但是觉的会常用，所以就包装成类了，供以后使用，也供有需要的人学习使用。

下面只是一个简单的demo,用的话自己可以在编辑页码样式，有默认的格式。不废话了，自己看吧，有注释使用说明。类（3kb)使用可以参照demo，不明白使用的可以留言。

以后会慢慢写一些项目开发中常遇到的问题，以及解决方案，和大家学习分享。

<!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><title>javascript分页类支持页码格式-Liehuo.net</title><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><style type="text/css">body {text-align:center;padding:20px 0 0 0;font-size:14px;}a {color:#000;font-size:14px;cursor:pointer;}ul, li {margin:0;padding:0;list-style:none;}.contain {margin:0 auto;width:825px;text-align:left;border:1px #000 solid;padding:5px;height:auto;}li.sd a,li.sd a:link,li.sd a:visited{background-color:#000; color:#FFF; font-size:13px;}</style><title>Jpage Demo - by funnyzak</title><script type="text/javascript">/* "调用方式 var zp = new zakPage(参数);zp.init();参数以此为源内容容器，分页结果容器，导航容器，页大小,单挑内容回调函数返回li对象,每个li的样式,选择后的样式没有则为null或""，默认起始页数,格式化页码显示格式*/function zakPage(id,pagec,navid,pagesize,lievt,ds,ss,idx,navp){this.obj = this;this.pageid = id;this.pagec = pagec;this.navc = navid;this.pagesize = pagesize || 7;this.lievt = lievt || null;this.rcount = 0;this.pagecount = 0;this.cpage = 1;this.ds = ds;if(this.ds == null){this.ds = "";}this.ss = ss;if(this.ss == null){this.ss = "";}this.idx = idx;this.navpre = navp || ["共{$pcount}页/{$rcount}条,当前第{cpage}页","首页","上一页","下一页","末页"];}zakPage.prototype = {init:function(){document.getElementById(this.pageid).style.display = "none";this.rcount = document.getElementById(this.pageid).getElementsByTagName("li").length;var residue = this.rcount%this.pagesize;var nums = parseInt(this.rcount/this.pagesize);this.pagecount = nums;if(residue != 0){this.pagecount = nums+1;}this.gopage(this.idx);},guide:function(){var nav = document.getElementById(this.navc);var np = this.navpre;nav.innerHTML = np[0].replace("{$rcount}",this.rcount).replace("{$pcount}",this.pagecount).replace("{cpage}",this.cpage);nav.appendChild(this.createa(np[1],1));nav.appendChild(this.createa(np[2],this.cpage-1));nav.appendChild(this.createa(np[3],this.cpage+1));nav.appendChild(this.createa(np[4],this.pagecount));},createa:function(html,index){var aa = document.createElement("a");aa.innerHTML = html;var o = this.obj;aa.onclick = function(){o.gopage(index);}return aa;},gopage:function(index){if(index>this.pagecount){index=1;}if(index<=0){index = this.pagecount;}this.cpage = index;var ghtml = document.getElementById(this.pagec);ghtml.innerHTML = "";var pages = (index-1)*this.pagesize;var pagee = pages+this.pagesize;if(pagee>this.rcount){pagee = this.rcount;}for(var i=pages;i<pagee;i++){var lil = document.createElement("li");lil.className = this.ds;lil.innerHTML = this.litem(i);var sss = this.ss;if(this.lievt !=null){lil.lievt = this.lievt;lil.onclick = function(){this.lievt(this);this.className = sss;}}ghtml.appendChild(lil);}this.guide();},litem:function(index){return document.getElementById(this.pageid).getElementsByTagName("li")[index].innerHTML;}}</script></head><body><div class="contain"><ul id="jpage"><li>09日<a target="_blank" href="http://www.wfuyu.com/a/view/11372.html">BTchina遭关闭视频“版权门”BT下载模式堪忧</a></li><li>09日<a target="_blank" href="http://www.wfuyu.com/a/view/11371.html">支付宝总裁邵晓峰裸奔庆祝业绩提前达标</a></li><li>09日<a target="_blank" href="http://www.wfuyu.com/a/view/11369.html">呐喊：站长们一定要坚定地走下去！</a></li><li>07日<a target="_blank" href="http://www.wfuyu.com/a/view/11366.html">王钰钧:让百度每天更新收录的成功经验</a></li><li>07日<a target="_blank" href="http://www.wfuyu.com/a/view/11363.html">百度竞价排名系统被指未完全＂下架＂</a></li><li>07日<a target="_blank" href="http://www.wfuyu.com/a/view/11362.html">百度新筑凤巢不良网站仍可购买搜索关键词</a></li><li>07日<a target="_blank" href="http://www.wfuyu.com/a/view/11361.html">为2010年考虑网站调整SEO战略</a></li><li>07日<a target="_blank" href="http://www.wfuyu.com/a/view/11360.html">要脱颖而出更要安全五个关键词帮网店卖家建</a></li><li>07日<a target="_blank" href="http://www.wfuyu.com/a/view/11339.html">无视听许可BTChina关站澄清站长被拘传言</a></li><li>07日<a target="_blank" href="http://www.wfuyu.com/a/view/11336.html">内部链接还是外部链接?</a></li><li>07日<a target="_blank" href="http://www.wfuyu.com/a/view/11335.html">如何向Google资讯推荐和提交新闻网站内容</a></li><li>07日<a target="_blank" href="http://www.wfuyu.com/a/view/11333.html">百度遭遇山寨版网站律师称模仿者侵权</a></li><li>05日<a target="_blank" href="http://www.wfuyu.com/a/view/11326.html">对于央视曝光“百谷成”事件的看法</a></li><li>05日<a target="_blank" href="http://www.wfuyu.com/a/view/11320.html">新网DNS域名解析故障 Dnspod趁机涨价？</a></li><li>04日<a target="_blank" href="http://www.wfuyu.com/a/view/11319.html">我的淘宝网服装站还能经的起此次的风波吗？</a></li><li>04日<a target="_blank" href="http://www.wfuyu.com/a/view/11318.html">站长如何去创造搜索源来推广网站</a></li><li>04日<a target="_blank" href="http://www.wfuyu.com/a/view/11308.html">技术性站长应该避免的10个毛病</a></li><li>04日<a target="_blank" href="http://www.wfuyu.com/a/view/11307.html">做站长的打死不能买新网域名</a></li><li>04日<a target="_blank" href="http://www.wfuyu.com/a/view/11306.html">“网站运营”简言之就是制定有效的盈利模式</a></li><li>04日<a target="_blank" href="http://www.wfuyu.com/a/view/11303.html">安徽炎黄网络被调查殃及上万网站无法访问</a></li><li>03日<a target="_blank" href="http://www.wfuyu.com/a/view/11298.html">别迷恋百度凤巢凤巢只是个传说</a></li><li>03日<a target="_blank" href="http://www.wfuyu.com/a/view/11297.html">网站标签优化一小步排名一大步</a></li><li>03日<a target="_blank" href="http://www.wfuyu.com/a/view/11288.html">百度贴吧六周年庆启用tieba.com新域名</a></li><li>03日<a target="_blank" href="http://www.wfuyu.com/a/view/11270.html">浅淡：关于最近IDC商的“痛”</a></li><li>03日<a target="_blank" href="http://www.wfuyu.com/a/view/11271.html">百度“凤巢门”搞的草根站长人心惶惶</a></li><li>03日<a target="_blank" href="http://www.wfuyu.com/a/view/11272.html">情色六月网站传播色情张方耀获刑十一年</a></li><li>02日<a target="_blank" href="http://www.wfuyu.com/a/view/11266.html">PHPCMS 新版本发布在即未来发展空间更大</a></li><li>01日<a target="_blank" href="http://www.wfuyu.com/a/view/11224.html">百度算法怎么更新都要以体验度为尺度</a></li><li>01日<a target="_blank" href="http://www.wfuyu.com/a/view/11217.html">“百度熊”的掌上战略初见雏形</a></li><li>01日<a target="_blank" href="http://www.wfuyu.com/a/view/11215.html">做网站去淘宝逛逛是很有必要的</a></li><li>01日<a target="_blank" href="http://www.wfuyu.com/a/view/11214.html">网站快速建立索引的几种技巧</a></li><li>01日<a target="_blank" href="http://www.wfuyu.com/a/view/11213.html">作为草根站长我应该何去何从</a></li><li>01日<a target="_blank" href="http://www.wfuyu.com/a/view/11181.html">赛门铁克发布100个最危险网站排行榜</a></li><li>01日<a target="_blank" href="http://www.wfuyu.com/a/view/11175.html">英文站长需要知道的国外广告联盟</a></li><li>01日<a target="_blank" href="http://www.wfuyu.com/a/view/11172.html">cPanel面板:快速上传文件到空间的方法</a></li><li>01日<a target="_blank" href="http://www.wfuyu.com/a/view/11166.html">必应2009年10大热门搜索关键词公布</a></li><li>30日<a target="_blank" href="http://www.wfuyu.com/a/view/11164.html">百度“我的个性化首页”出现网页错误</a></li><li>30日<a target="_blank" href="http://www.wfuyu.com/a/view/11162.html">从 Google PageRank 解读SEO的误区</a></li><li>30日<a target="_blank" href="http://www.wfuyu.com/a/view/11161.html">让你的网页更受搜索引擎重视</a></li><li>30日<a target="_blank" href="http://www.wfuyu.com/a/view/11137.html">网站多次改版总结出来的经验及教训</a></li><li>30日<a target="_blank" href="http://www.wfuyu.com/a/view/11134.html">新华社与阿里巴巴联合打造雅虎新闻中心</a></li><li>30日<a target="_blank" href="http://www.wfuyu.com/a/view/11133.html">搜狐斥资7.5亿在北京开发房地产项目</a></li><li>30日<a target="_blank" href="http://www.wfuyu.com/a/view/11132.html">利用 Feed2js 轻松将你的rss转成JS</a></li><li>27日<a target="_blank" href="http://www.wfuyu.com/a/view/11067.html">维基百科创始人否认4.9万编辑流失</a></li><li>27日<a target="_blank" href="http://www.wfuyu.com/a/view/11065.html">回答SEOWHY论坛会员菜鸟四则SEO小问</a></li><li>27日<a target="_blank" href="http://www.wfuyu.com/a/view/11064.html">一个企业要注册多少域名才算好</a></li><li>27日<a target="_blank" href="http://www.wfuyu.com/a/view/11051.html">站长浅谈:如何利用QQ、旺旺赚钱</a></li><li>27日<a target="_blank" href="http://www.wfuyu.com/a/view/11050.html">经验分享:关于alt标签的应用研究</a></li><li>27日<a target="_blank" href="http://www.wfuyu.com/a/view/11045.html">西联汇款的现汇、现钞买入价与基准价问题</a></li><li>26日<a target="_blank" href="http://www.wfuyu.com/a/view/11035.html">帮助谷歌收录你的手机网站</a></li></ul><ul id="pagec"></ul></div><div id="navs"></div><script type="text/javascript">function bb(a){alert(a.innerHTML);}var arr = ["{$rcount}record,total{$pcount}page currenpage{cpage} "," indexpage"," prevpage "," nextpage "," lastpage "];var zp = new zakPage("jpage","pagec","navs",15,bb,null,null,4,null); //此为默认页码格式//var zp = new zakPage("jpage","pagec","navs",15,bb,null,null,4,arr); //自定义页码格式zp.init();</script></body></html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 Extjs 4 自定义panel边框,解决双重边框问题

下一篇 Access入门教程 15.8 为宏的操作设定条件

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点