在做商城和订单管理的时候，常常会用到分页功能，所以我封装了一个jQuery的分页插件，该插件主要实现上下翻页，输入数字跳转等功能。

具体实现如下：

输入参数需要当前页码页码，总页码totalPage，回调函数回调。

主要的实现有两个函数，一个是根据当前页和总页数生成相应的超文本标记语言的代码，一个是事件绑定及回调函数的执行。

creatHtml函数：

creathtml : FuncTion(){ var me=this；定义变量内容=' ';//当前页码无功电流=me。选项。页码；//总页码var total=me。选项。总页数；//当前页码大于一显示向上翻页按钮如果(当前1){ content=' a/a '；}//总页数大于7,根据当前页显示省略号，否则显示全部页码如果(总计7){如果(当前4){ for(var I=1；i7；I){ if(current==I){ content=' a class=' current ' ' I '/a '；} else { content=' a ' I/a '；} }内容="."；内容='a '总计/a；}else{ if(当前总计-3){ content=' a name=' 1 ' type=' button ' class=' page num ' 1/a '；内容=' . '；对于(var I=电流-2;一、当前3；I){ if(current==I){ content=' a class=' current ' ' I '/a '；} else { content=' a ' I/a '；} }内容="."；内容='a '总计/a；} else { content=' a1/a '；内容=' . '；for(var I=total-5；itotal 1；I){ if(current==I){ content=' a class=' current ' ' I '/a '；} else { content=' a ' I/a '；} } } } else { for(var I=1；itotal 1；I){ if(current==I){ content=' a class=' current ' ' I '/a '；} else { content=' a ' I/a '；} } }//当前页小于总页数，显示向下翻页按钮如果(当前总数){ content=' a/a '；}//输入跳转内容='到第；content=' input max=' 3 ' maxlength=' 3 ' value=' current ' ' type=' text '/'；内容='页；内容=' AgO/a '；//更新HTML me.element.html(内容);}bindEvent函数：

bindevent :函数(){ var me=this//分页点击事件me.element.on('click '，' a '，function(){ var num=$(this).html()；if(num==''){//上翻我。选项。页码=我。选项。第1页；}else if(num==''){//下翻我。选项。页码=我。选项。第1页；}else if(num=='Go'){//输入页码跳转var ipt=me.element.find('input ').val()；if(ipt=me。选项。TotalPageipt！=我。选项。页码){我。选项。页码=ipt} }else{//直接跳转我。选项。页码=num}//更新html me。creathtml()；//调用回调函数，返回当前页码如果(我。选项。回调){我。选项。回调(我。选项。页码)；} });}将函数封装起来，完整如下：

；（函数($,窗口，文档，未定义){ var initDate={ pageNo:1，totalPage:1，回调函数：(){ }；函数分页（元素，选项){ this . element=element this . options=options=$ .extend(initDate，options | | { })；这个。init()；}寻呼。prototype={构造函数：分页，init :函数(){ this。creathtml()；这个。bindEvent()；}，creathtml : function(){ var me=this；定义变量内容=' ';无功电流=me。选项。页码；var total=me。选项。总页数；如果(当前1){ content=' a/a '；}如果(总计7){如果(当前4){ for(var I=1；i7；I){ if(current==I){ content=' a class=' current ' ' I '/a '；} else { content=' a ' I/a '；} }内容="."；内容='a '总计/a；}else{ if(当前总计-3){ content=' a name=' 1 ' type=' button ' class=' page num ' 1/a '；内容=' . '；对于(var I=电流-2;一、当前3；I){ if(current==I){ content=' a class=' current ' ' I '/a '；} else { content=' a ' I/a '；} }内容="."；内容='a '总计/a；} else { content=' a1/a '；内容=' . '；for(var I=total-5；itotal 1；I){ if(current==I){ content=' a class=' current ' ' I '/a '；} else { content=' a ' I/a '；} } } } else { for(var I=1；itotal 1；I){ if(current==I){ content=' a class=' current ' ' I '/a '；} else { content=' a ' I/a '；} } }如果(当前总数){ content=' a/a '；}内容='到第；content=' input max=' 3 ' maxlength=' 3 ' value=' current ' ' type=' text '/'；内容='页；内容=' AgO/a '；me.element.html(内容);}，BindEvent : FuncTion(){ var me=this；me.element.on('click '，' a '，function(){ var num=$(this).html()；if(num==' '){ me。选项。页码=我。选项。第1页；} else if(num==' '){ me。选项。页码=我。选项。第1页；} else if(num==' Go '){ var ipt=me。元素。查找('输入').val()；if(ipt=me。选项。TotalPageipt！=我。选项。页码){我。选项。页码=ipt} } else { me。选项。页码=num}我。creathtml()；如果(我。选项。回调){我。选项。回调(我。选项。页码)；} });} };$ .fn。分页=函数(选项){选项=$ .extend(initDate，options | | { })；返回新的分页($(本)、选项);}})(jQuery，窗口，文档);HTML:

div id='page'/div

射流研究…引用：

$('#page ').分页({pageNo:2，totalPage:10，回调：函数(cur){ console。日志('当前页：' cur)；//当前页：2}});这里加了一些简单的样式，可以根据具体的用户界面设计来设计样式。

style type=' text/CSS ' a { width : 23px；高： 23像素： 1像素实心# dce0e0文本对齐：中心；margin: 0 4pxcursor:指针；显示器：内联块；} .当前{底色： # 5ac 3e 7；} /stylegithub地址：https://github。com/火星人1/jquery。传呼。射流研究…

更多精彩内容请点击：jquery分页功能汇总进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。