登 录
网上找了到久没发现合适的 js版本的分页类
无奈自己动手吧
以下代码直接保存 xxx.html ，双击查看效果
CSDN 的编辑器有些问题，可以直接在这里下载演示代码
http://download.csdn.net/source/2773807
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>javascript 版分页类, 可用于ajax</title><br /> <STYLE TYPE="text/css"><br /> /*默认页样式*/<br /> .otherPage{color:blue}<br /> /*当前页样式*/<br /> .currPage{color:red}<br /> </STYLE><br /> <SCRIPT LANGUAGE="JavaScript"><br /> <!--<br /> /*<br /> javascript 版分页类, 可用于ajax<br /> 2010-10-21 20:52 by ggg<br /> */<br /> var ggg_pager= {<br /> m_total : 0 , //总记录数<br /> m_onepage : 0 , //每页显示几条记录<br /> m_num : 5 , //显示几个页码<br /> m_currPage : 0 , //当前是第几页<br /> m_totalPage : 0 , //总共有几页<br /> m_offset : 0 , //当前是第几条记录</p> <p> m_currPageStyle : "currPage", //分页导行显示在哪个元素里</p> <p> m_currPageStyle : "currPage", //当前页面样式名<br /> m_otherPageStyle : "otherPage", //当前页面样式名<br /> m_SymbolNextPage : "[>]", //下一页图标<br /> m_SymbolPrevPage : "[<]", //上一页图标<br /> m_SymbolNextGroup : "[>>]", //下一组图标<br /> m_SymbolPrevGroup : "[<<]", //上一组图标<br /> m_goCallFunction : null, //点页码时回调<br /> /**<br /> * 初始化参数<br /> *<br /> * @param int $total 总记录数<br /> * @param int $onepage 每页显示几条记录<br /> * @param int num 显示几个页码<br /> * @param function callFunc 点页码时回调<br /> * @return null<br /> */<br /> iniParams : function( total, onepage, callFunc,num,pageNavDom){<br /> this.m_total = total;<br /> this.m_onepage = onepage;</p> <p> if(typeof(num) != 'undefined')<br /> this.m_num = num;<br /> if(typeof(callFunc) != 'undefined')<br /> this.m_goCallFunction = callFunc;<br /> this.m_totalPage = Math.ceil(total / onepage);<br /> },<br /> /**<br /> * 取得下一页.$char为链接的字符,默认为"[>]"<br /> *<br /> * @return string<br /> */<br /> nextPage : function( ) {<br /> var total_page = this.m_totalPage;<br /> var pagecount = this.m_currPage;<br /> var char = this.m_SymbolNextPage;</p> <p> var next_page = 0;<br /> if (pagecount < total_page)<br /> {<br /> next_page = pagecount + 1;<br /> return this.pageButton(next_page,char,"下一页");<br /> }<br /> else<br /> {<br /> return '';<br /> }<br /> },<br /> /**<br /> * 取得上一页.$char为链接的字符,默认为"[<]"<br /> *<br /> * @return string<br /> */<br /> prePage : function( ) {<br /> var pagecount = this.m_currPage;<br /> var char = this.m_SymbolPrevPage;</p> <p> var pre_page = 0;<br /> if (pagecount>1)<br /> {<br /> pre_page = pagecount - 1;<br /> return this.pageButton(pre_page,char,"上一页");<br /> }<br /> else<br /> {<br /> return '';<br /> }<br /> },<br /> /**<br /> * 取得上一组数字条.$char为链接的字符,默认为"[<<]"<br /> *<br /> * @return string<br /> */<br /> preGroup : function( ) {<br /> var pagecount = this.m_currPage;<br /> var num = this.m_num;<br /> var mid = Math.floor(num/2);<br /> var minpage = (pagecount - mid)<1 ? 1 : pagecount - mid;<br /> char = this.m_SymbolPrevGroup ;<br /> var pgpagecount = minpage > num ? minpage - mid : 1;<br /> return this.pageButton(pgpagecount,char,"上一组页码段");<br /> },<br /> /**<br /> * 取得下一组数字条.$char为链接的字符,默认为"[>>]"<br /> *<br /> * @return string<br /> */<br /> nextGroup : function( ) {<br /> var pagecount = this.m_currPage;<br /> var totalpage = this.m_totalPage;<br /> var num = this.m_num;<br /> var mid = Math.floor(num/2);<br /> var last = num;<br /> var minpage = (pagecount - mid)<1 ? 1 : pagecount - mid;<br /> var maxpage = minpage + last;<br /> if (maxpage > totalpage)<br /> {<br /> maxpage = totalpage;<br /> minpage = maxpage - last;<br /> minpage = minpage < 1 ? 1 : minpage;<br /> }<br /> char = this.m_SymbolNextGroup ;<br /> var ngpagecount = (totalpage > maxpage + last)? maxpage + mid : totalpage;<br /> return this.pageButton(ngpagecount,char,"下一组页码段");<br /> },<br /> /**<br /> * 取得第一页.$link为1是为带链接<br /> *<br /> * @param int $num 为个数,默认为10<br /> * @param string $color 为当前链接的突显颜色<br /> * @return string<br /> */<br /> firstPage : function( link ) {<br /> var linkchar = "<span class='"+this.m_otherPageStyle+"'> [1]</span>";<br /> if (link==1)<br /> {<br /> return this.pageButton(1,linkchar,"第一页");<br /> }<br /> else<br /> {<br /> return 1;<br /> }<br /> },<br /> /**<br /> * 取得页码数字条<br /> *<br /> * @param string $color 为当前链接的突显颜色<br /> * @param string $left 数字左边 默认为"["<br /> * @param string $right 数字左右 默认为"]"<br /> * @return string<br /> */<br /> numBar : function( left, right) {<br /> var num = this.m_num ;<br /> var mid = Math.floor(num/2);<br /> var last = num - 1;<br /> var pagecount = this.m_currPage;<br /> var totalpage = this.m_totalPage;</p> <p> left = typeof(left) =='undefined' ? "[" : left;<br /> right = typeof(right) =='undefined' ? "]" : right;<br /> var minpage = (pagecount - mid)<1 ? 1 : pagecount - mid;<br /> var maxpage = minpage + last;<br /> if (maxpage > totalpage)<br /> {<br /> maxpage = totalpage;<br /> minpage = maxpage - last;<br /> minpage = minpage<1 ? 1 : minpage;<br /> }<br /> var linkchar = Array();<br /> var class_style = null;<br /> var chars = null;<br /> for (var i = minpage; i<= maxpage; i++)<br /> {<br /> chars = left + i+ right;<br /> //当前页<br /> if (i == pagecount)<br /> {<br /> class_style = this.m_currPageStyle;<br /> }<br /> else<br /> class_style = this.m_otherPageStyle;<br /> linkchar.push(this.pageButton(i,chars,"第"+i+"页",class_style));<br /> }<br /> return linkchar.join('');<br /> },<br /> //得到页码内容<br /> pageButton : function(num,char,title,classStyle){</p> <p> classStyle = typeof(classStyle) =='undefined' ? this.m_otherPageStyle : classStyle;<br /> return "<a class='"+classStyle+"' href="javascript:void(0);" mce_href="javascript:void(0);" onclick='ggg_pager.go("+num+")' title=/""+title+"/">"+char+"</a>";<br /> },<br /> //跳到指定页面<br /> //返回<br /> go : function(num){</p> <p> this.m_currPage = num;<br /> //返回下页代码<br /> var ret_str = this.getPages(num);<br /> //回调指定函数<br /> if(null != this.m_goCallFunction)<br /> this.m_goCallFunction(num,ret_str);<br /> return ret_str;<br /> },<br /> //得到最终的分页效果<br /> //currPage 当前第几页<br /> getPages : function(currPage){<br /> if (currPage=='')<br /> {<br /> this.m_currPage = 1;<br /> this.m_offset = 0;<br /> }<br /> else<br /> {<br /> this.m_currPage = currPage;<br /> this.m_offset = (currPage - 1) * this.m_onepage;<br /> }<br /> var num_bar = this.numBar();<br /> var first_page = this.firstPage(1, '');<br /> var pre_group = this.preGroup(this.m_SymbolPrevGroup);<br /> var next_group = this.nextGroup(this.m_SymbolNextGroup);<br /> var next_page = this.nextPage(this.m_SymbolNextPage);<br /> var pre_page = this.prePage(this.m_SymbolPrevPage);<br /> var ret_str = first_page + pre_group +pre_page + num_bar +next_page +next_group;<br /> return ret_str<br /> }<br /> };<br /> //--><br /> </SCRIPT><br /> </head><br /> <body><br /> <div id="ggg_page_nav"></div><br /> <SCRIPT LANGUAGE="JavaScript"><br /> <!--<br /> //点击某页时的回调函数<br /> function page_click(numb,pageString)<br /> {<br /> //这里可以用 ajax 进行取页面里的内容<br /> alert("跳到第 "+ numb+ " 页");<br /> //重新显示页面<br /> document.getElementById("ggg_page_nav").innerHTML= pageString;<br /> }<br /> /**<br /> * 初始化参数<br /> *<br /> * @param int $total 总记录数<br /> * @param int $onepage 每页显示几条记录<br /> * @param int num 显示几个页码<br /> * @param function callFunc 点页码时回调<br /> * @return object<br /> */<br /> //iniParams : function( total, onepage, callFunc,num,pageNavDom){<br /> ggg_pager.iniParams(100,5,page_click,5);<br /> //默认当前第几页<br /> var curr_page = 1;<br /> document.getElementById("ggg_page_nav").innerHTML= ggg_pager.getPages(curr_page);<br /> //--><br /> </SCRIPT><br /> </body><br /> </html><br />
抱歉!评论已关闭.