html页码插件,最实用的jQuery分页插件

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

具体实现如下：

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

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

creatHtml函数：

creatHtml:function(){

var me=this;

var content="";

//当前页码

var current=me.options.pageNo;

//总页码

var total=me.options.totalPage;

//当前页码大于1显示向上翻页按钮

if(current > 1){

content += "<";

}

//总页数大于7，根据当前页显示省略号，否则显示全部页码

if(total > 7){

if(current < 4){

for(var i=1;i<7;i++){

if(current==i){

content += ""+i+"";

}else{

content += ""+i+"";

}

}

content += "...";

content += ""+total+"";

}else{

if(current < total - 3){

content += "1";

content += "...";

for(var i=current-2;i

if(current==i){

content += ""+i+"";

}else{

content += ""+i+"";

}

}

content += "...";

content += ""+total+"";

}else{

content += "1";

content += "...";

for(var i=total-5;i

if(current==i){

content += ""+i+"";

}else{

content += ""+i+"";

}

}

}

}

}else{

for(var i=1;i

if(current==i){

content += ""+i+"";

}else{

content += ""+i+"";

}

}

}

//当前页小于总页数，显示向下翻页按钮

if(current < total){

content += ">";

}

//输入跳转

content += " 到第 ";

content += "";

content += " 页 ";

content += "Go";

//更新HTML

me.element.html(content);

}

bindEvent函数：

bindEvent:function(){

var me=this;

//分页点击事件

me.element.on('click','a',function(){

var num=$(this).html();

if(num=="<"){//上翻

me.options.pageNo=+me.options.pageNo-1;

}else if(num==">"){//下翻

me.options.pageNo=+me.options.pageNo+1;

}else if(num=="Go"){//输入页码跳转

var ipt=+me.element.find('input').val();

if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){

me.options.pageNo=ipt;

}

}else{//直接跳转

me.options.pageNo=+num;

}

//更新html

me.creatHtml();

//调用回调函数，返回当前页码

if(me.options.callback){

me.options.callback(me.options.pageNo);

}

});

}

将函数封装起来，完整如下：

;(function($,window,document,undefined){

var initDate={

pageNo:1,

totalPage:1,

callback:function(){}

};

function Paging(element,options){

this.element = element;

this.options=options=$.extend(initDate,options||{});

this.init();

}

Paging.prototype={

constructor:Paging,

init:function(){

this.creatHtml();

this.bindEvent();

},

creatHtml:function(){

var me=this;

var content="";

var current=me.options.pageNo;

var total=me.options.totalPage;

if(current > 1){

content += "<";

}

if(total > 7){

if(current < 4){

for(var i=1;i<7;i++){

if(current==i){

content += ""+i+"";

}else{

content += ""+i+"";

}

}

content += "...";

content += ""+total+"";

}else{

if(current < total - 3){

content += "1";

content += "...";

for(var i=current-2;i

if(current==i){

content += ""+i+"";

}else{

content += ""+i+"";

}

}

content += "...";

content += ""+total+"";

}else{

content += "1";

content += "...";

for(var i=total-5;i

if(current==i){

content += ""+i+"";

}else{

content += ""+i+"";

}

}

}

}

}else{

for(var i=1;i

if(current==i){

content += ""+i+"";

}else{

content += ""+i+"";

}

}

}

if(current < total){

content += ">";

}

content += " 到第 ";

content += "";

content += " 页 ";

content += "Go";

me.element.html(content);

},

bindEvent:function(){

var me=this;

me.element.on('click','a',function(){

var num=$(this).html();

if(num=="<"){

me.options.pageNo=+me.options.pageNo-1;

}else if(num==">"){

me.options.pageNo=+me.options.pageNo+1;

}else if(num=="Go"){

var ipt=+me.element.find('input').val();

if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){

me.options.pageNo=ipt;

}

}else{

me.options.pageNo=+num;

}

me.creatHtml();

if(me.options.callback){

me.options.callback(me.options.pageNo);

}

});

}

};

$.fn.paging=function(options){

options=$.extend(initDate,options||{});

return new Paging($(this),options);

}

})(jQuery,window,document);

HTML：

js引用：

$('#page').paging({pageNo:2,totalPage:10,callback:function(cur){

console.log(‘当前页：'+cur);//当前页：2

}});

这里加了一些简单的样式，可以根据具体的ui设计来设计样式。

a{

width: 23px;

height: 23px;

border: 1px solid #dce0e0;

text-align: center;

margin: 0 4px;

cursor: pointer;

display: inline-block;

}

.current{

background-color: #5ac3e7;

}

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

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