可根据需求定制的jquery分页

本文讲述作者自己用jquery实现的,便于以后使用的分页框架。该分页框架兼容IE,FF,Chrome等主流浏览器,便于移植,可根据需求定制,不需要引入css样式,样式是使用json传入。

1,使用方法:

在需要设置分页的html文件里引入两个文件.一个是jquery.js,另外一个就是jquery.pager.update-1.0.js(这个是核心代码)。

<scriptsrc="jquery.js"type="text/javascript"></script><scriptsrc="jquery.pager.update-1.0.js"type="text/javascript"></script>

html中body部分的内容如下:

<h2id="result">Clickthepagerbelow.</h2><divid="pager"class="jqpager"></div>

需要自己写的js如下;

<scripttype="text/javascript"language="javascript">varRECORD_COUNT=200;//记录数varPAGE_SIZE=10;//每页显示的条数varLI_NUM=5;//显示的数字按钮个数//设置一些样式vartextButtonCss={//设置显示文本按钮的样式,根据自己需要定制width:'40px',height:'28px'};varTEXT_0={firsttext:'<<',//首页按钮的显示内容prevtext:'<',//上一页按钮的显示内容nexttext:'>',//下一页按钮显示的内容lasttext:'>>'//末页按钮显示的内容};//pagenumber为当前页码//pagecount为显示页数//PageClick为回调函数//pageclickednumber为点击页码$(function(){$("#pager").pager({pagenumber:1,recordcount:RECORD_COUNT,pagesize:PAGE_SIZE,css_textButton:textButtonCss,text:TEXT_0,liNum:LI_NUM,buttonClickCallback:PageClick});$("#result").html("ClickedPage"+1);});PageClick=function(pageclickednumber){$("#pager").pager({pagenumber:pageclickednumber,recordcount:RECORD_COUNT,pagesize:PAGE_SIZE,css_textButton:textButtonCss,text:TEXT_0,liNum:LI_NUM,buttonClickCallback:PageClick});$("#result").html("ClickedPage"+pageclickednumber);}</script>

当然,能定制的不仅仅是这些,在jquery.pager.update-1.0.js找到可以定制的内容.

如下(我把其中的按钮分成两种:1,文本按钮,2,数字按钮):

$.fn.pager.defaults={pagenumber:1,//当前页码recordcount:20,//记录总数pagesize:10,//每页显示记录数liNum:5,//显示数字的个数text:{//页面上需要显示的文本,除数字外firsttext:'<<',//显示的第一页文本prevtext:'<',//显示的前一页文本nexttext:'>',//显示的下一页文本lasttext:'>>'//显示的最后一页文本},css_textButton:{//文本按钮样式width:'80px',height:'28px'},css_classPages:{//按钮外面的ul的样式display:'block',border:'none',textTransform:'uppercase',margin:'2px015px2px',padding:'0',cursor:'pointer'},css_classPagesLi:{//所有按钮的样式width:'30px',height:'28px',lineHeight:'28px',listStyle:'none',float:'left',border:'1pxsolid#ccc',borderRadius:'4px',textDecoration:'none',margin:'05px00',textAlign:'center',fontSize:'12px',fontFamily:'微软雅黑'},css_classPgEmpty:{//文本按钮不能点击时的样式border:'1pxsolid#aaa',color:'#aaa',cursor:'default'},css_classPgCurrent:{//当前页码的样式border:'1pxsolid#aaa',color:'#000',fontWeight:'700',backgroundColor:'#eee'},css_classPagesLiHover:{//鼠标经过时显示的样式border:'1pxsolid#003f7e'}};

现在分享一下核心的jquery.pager.update-1.0.js代码吧。

(function($){$.fn.pager=function(options){varopts=$.extend({},$.fn.pager.defaults,options);returnthis.each(function(){$(this).empty().append(renderpager(opts));$('li',this).mouseover(function(){document.body.style.cursor="pointer";}).mouseout(function(){document.body.style.cursor="auto";});});};functiongetPageCount(totalCount,pageSize){varpageCount=0;pageCount=parseInt(totalCount/pageSize);if(totalCount%pageSize>0){pageCount++;}returnpageCount;}vartextButtonStyle,classPagesCss,classPagesLiCss,classPgEmptyCss,classPgCurrentCss,classPagesLiHoverCss;functionrenderpager(opts){varpagecount=getPageCount(opts.recordcount,opts.pagesize);varfirsttext=opts.text.firsttext;varprevtext=opts.text.prevtext;varnexttext=opts.text.nexttext;varlasttext=opts.text.lasttext;varpagenumber=parseInt(opts.pagenumber);varrecordcount=opts.recordcoun;varbuttonClickCallback=opts.buttonClickCallback;varliNum=opts.liNum;textButtonStyle=opts.css_textButton;classPagesCss=opts.css_classPages;classPagesLiCss=opts.css_classPagesLi;classPgEmptyCss=opts.css_classPgEmpty;classPgCurrentCss=opts.css_classPgCurrent;classPagesLiHoverCss=opts.css_classPagesLiHover;var$pager=$('<ulclass="pages"></ul>');$pager.css(classPagesCss);$pager.append(renderButton('first',firsttext,pagenumber,pagecount,buttonClickCallback)).append(renderButton('prev',prevtext,pagenumber,pagecount,buttonClickCallback));varstartPoint=1;varendPoint=liNum;varspace=(endPoint-1)/2;if(pagenumber>pagecount){pagenumber=pagecount;}if(pagenumber>space){startPoint=pagenumber-space;endPoint=pagenumber+space;}if(endPoint>pagecount){startPoint=pagecount-space*2;endPoint=pagecount;}if(startPoint<1){startPoint=1;}for(varpage=startPoint;page<=endPoint;page++){varcurrentButton=$('<liclass="page-number">'+(page)+'</li>');currentButton.css(classPagesLiCss).hover(function(){$(this).css(classPagesLiHoverCss);},function(){$(this).css(classPagesLiCss);});page==pagenumber?currentButton.css(classPgCurrentCss):currentButton.click(function(){buttonClickCallback(this.firstChild.data);});currentButton.appendTo($pager);}$pager.append(renderButton('next',nexttext,pagenumber,pagecount,buttonClickCallback)).append(renderButton('last',lasttext,pagenumber,pagecount,buttonClickCallback));return$pager;}//渲染按钮functionrenderButton(buttonLabel,buttonText,pagenumber,pagecount,buttonClickCallback){var$Button=$('<liclass="pgNext">'+buttonText+'</li>');vardestPage=1;switch(buttonLabel){case"first":destPage=1;break;case"prev":destPage=pagenumber-1;break;case"next":destPage=pagenumber+1;break;case"last":destPage=pagecount;break;}if(buttonLabel=="first"||buttonLabel=="prev"){pagenumber<=1?$Button.css(classPgEmptyCss):$Button.click(function(){buttonClickCallback(destPage);});}else{pagenumber>=pagecount?$Button.css(classPgEmptyCss):$Button.click(function(){buttonClickCallback(destPage);});}$Button.css(classPagesLiCss).hover(function(){$(this).css(classPagesLiHoverCss);},function(){$(this).css(classPagesLiCss).css(textButtonStyle);}).css(textButtonStyle);return$Button;}$.fn.pager.defaults={pagenumber:1,//当前页码recordcount:20,//记录总数pagesize:10,//每页显示记录数liNum:5,//显示数字的个数text:{//页面上需要显示的文本,除数字外firsttext:'<<',//显示的第一页文本prevtext:'<',//显示的前一页文本nexttext:'>',//显示的下一页文本lasttext:'>>'//显示的最后一页文本},css_textButton:{width:'80px',height:'28px'},css_classPages:{display:'block',border:'none',textTransform:'uppercase',margin:'2px015px2px',padding:'0',cursor:'pointer'},css_classPagesLi:{width:'30px',height:'28px',lineHeight:'28px',listStyle:'none',float:'left',border:'1pxsolid#ccc',borderRadius:'4px',textDecoration:'none',margin:'05px00',textAlign:'center',fontSize:'12px',fontFamily:'微软雅黑'},css_classPgEmpty:{border:'1pxsolid#aaa',color:'#aaa',cursor:'default'},css_classPgCurrent:{border:'1pxsolid#aaa',color:'#000',fontWeight:'700',backgroundColor:'#eee'},css_classPagesLiHover:{border:'1pxsolid#003f7e'}};})(jQuery);

2,效果图:

如有错误,欢迎指出。