最實(shí)用的jQuery分頁插件

更新時(shí)間：2016年10月09日 08:47:48 作者：趙青

這篇文章主要為大家詳細(xì)介紹了最實(shí)用的jQuery分頁插件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在做商城和訂單管理的時(shí)候，常常會用到分頁功能，所以我封裝了一個(gè)jQuery的分頁插件，該插件主要實(shí)現(xiàn)上下翻頁，輸入數(shù)字跳轉(zhuǎn)等功能。

具體實(shí)現(xiàn)如下：

輸入?yún)?shù)需要當(dāng)前頁碼pageNo，總頁碼totalPage，回調(diào)函數(shù)callback。

主要的實(shí)現(xiàn)有兩個(gè)函數(shù)，一個(gè)是根據(jù)當(dāng)前頁和總頁數(shù)生成相應(yīng)的html的代碼，一個(gè)是事件綁定及回調(diào)函數(shù)的執(zhí)行。

creatHtml函數(shù)：

creatHtml:function(){
 var me=this;
 var content="";
　　//當(dāng)前頁碼
 var current=me.options.pageNo;
　　//總頁碼
 var total=me.options.totalPage;
　　//當(dāng)前頁碼大于1顯示向上翻頁按鈕
 if(current > 1){
 content += "<a><</a>";
 }
　　//總頁數(shù)大于7，根據(jù)當(dāng)前頁顯示省略號，否則顯示全部頁碼
 if(total > 7){
 if(current < 4){
  for(var i=1;i<7;i++){
  if(current==i){
   content += "<a class='current'>"+i+"</a>";
  }else{
   content += "<a>"+i+"</a>";
  }
  }
  content += "...";
  content += "<a>"+total+"</a>";
 }else{
  if(current < total - 3){
  content += "<a name='1' type='button' class='page num'>1</a>";
  content += "...";
  for(var i=current-2;i<current+3;i++){
   if(current==i){
   content += "<a class='current'>"+i+"</a>";
   }else{
   content += "<a>"+i+"</a>";
   }
  }
  content += "...";
  content += "<a>"+total+"</a>";
  }else{
  content += "<a>1</a>";
  content += "...";
  for(var i=total-5;i<total+1;i++){
   if(current==i){
   content += "<a class='current'>"+i+"</a>";
   }else{
   content += "<a>"+i+"</a>";
   }
  }
  }
 }
 }else{
 for(var i=1;i<total+1;i++){
  if(current==i){
  content += "<a class='current'>"+i+"</a>";
  }else{
  content += "<a>"+i+"</a>";
  }
 }
 }
　　//當(dāng)前頁小于總頁數(shù)，顯示向下翻頁按鈕
 if(current < total){
 content += "<a>></a>";
 }
　　//輸入跳轉(zhuǎn)
 content += " 到第 ";
 content += "<input max='3' maxlength='3' value='"+current+"' type='text' />";
 content += " 頁 ";
 content += "<a>Go</a>";
　　//更新HTML
 me.element.html(content);
}

bindEvent函數(shù)：

bindEvent:function(){
 var me=this;
　　//分頁點(diǎn)擊事件
 me.element.on('click','a',function(){
 var num=$(this).html();
 if(num=="&lt;"){//上翻
  me.options.pageNo=+me.options.pageNo-1;
 }else if(num=="&gt;"){//下翻
  me.options.pageNo=+me.options.pageNo+1;
 }else if(num=="Go"){//輸入頁碼跳轉(zhuǎn)
  var ipt=+me.element.find('input').val();
  if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){
  me.options.pageNo=ipt;
  }
 }else{//直接跳轉(zhuǎn)
  me.options.pageNo=+num;
 }
　　　　//更新html
 me.creatHtml();
　　　　//調(diào)用回調(diào)函數(shù)，返回當(dāng)前頁碼
 if(me.options.callback){
  me.options.callback(me.options.pageNo);
 }
 });
}

將函數(shù)封裝起來，完整如下：

;(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 += "<a><</a>";
  }
  if(total > 7){
  if(current < 4){
   for(var i=1;i<7;i++){
   if(current==i){
    content += "<a class='current'>"+i+"</a>";
   }else{
    content += "<a>"+i+"</a>";
   }
   }
   content += "...";
   content += "<a>"+total+"</a>";
  }else{
   if(current < total - 3){
   content += "<a name='1' type='button' class='page num'>1</a>";
   content += "...";
   for(var i=current-2;i<current+3;i++){
    if(current==i){
    content += "<a class='current'>"+i+"</a>";
    }else{
    content += "<a>"+i+"</a>";
    }
   }
   content += "...";
   content += "<a>"+total+"</a>";
   }else{
   content += "<a>1</a>";
   content += "...";
   for(var i=total-5;i<total+1;i++){
    if(current==i){
    content += "<a class='current'>"+i+"</a>";
    }else{
    content += "<a>"+i+"</a>";
    }
   }
   }
  }
  }else{
  for(var i=1;i<total+1;i++){
   if(current==i){
   content += "<a class='current'>"+i+"</a>";
   }else{
   content += "<a>"+i+"</a>";
   }
  }
  }
  if(current < total){
  content += "<a>></a>";
  }
  content += " 到第 ";
  content += "<input max='3' maxlength='3' value='"+current+"' type='text' />";
  content += " 頁 ";
  content += "<a>Go</a>";
  me.element.html(content);
 },
 bindEvent:function(){
  var me=this;
  me.element.on('click','a',function(){
  var num=$(this).html();
  if(num=="&lt;"){
   me.options.pageNo=+me.options.pageNo-1;
  }else if(num=="&gt;"){
   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(‘當(dāng)前頁：'+cur);//當(dāng)前頁：2
}});

這里加了一些簡單的樣式，可以根據(jù)具體的ui設(shè)計(jì)來設(shè)計(jì)樣式。

 <style type="text/css">
 a{
 width: 23px;
 height: 23px;
 border: 1px solid #dce0e0;
 text-align: center;
 margin: 0 4px;
 cursor: pointer;
 display: inline-block;
 }
 .current{
 background-color: #5ac3e7;
 }
 </style>

github地址：https://github.com/Martian1/jQuery.paging.js

更多精彩內(nèi)容請點(diǎn)擊：jquery分頁功能匯總進(jìn)行學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: