jQuery pager.js 插件動態(tài)分頁功能實例分析

更新時間：2019年08月02日 10:06:39 作者：專屬n

這篇文章主要介紹了jQuery pager.js 插件動態(tài)分頁功能,結(jié)合具體實例形式分析了pager.js 插件的定義及使用插件進行分頁操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了jQuery pager.js 插件動態(tài)分頁功能。分享給大家供大家參考，具體如下：

pager.js 代碼

function Page(opt){
   var set = $.extend({num:null,startnum:1,elem:null,callback:null},opt||{});
   if(set.startnum>set.num||set.startnum<1){
     set.startnum = 1;
   }
   var n = 0,htm = '';
   var clickpages = {
     elem:set.elem,
     num:set.num,
     callback:set.callback,
     init:function(){
      this.elem.next('div.pageJump').children('.button').unbind('click')
      this.JumpPages();
      this.elem.children('li').click(function () {
        var txt = $(this).children('a').text();
        var page = '', ele = null;
        var page1 = parseInt(clickpages.elem.children('li.active').attr('page'));
        if (isNaN(parseInt(txt))) {
         switch (txt) {
           case '下一頁':
            if (page1 == clickpages.num) {
              return;
            }
            if (page1 >= (clickpages.num - 2) || clickpages.num <= 6 || page1 < 3) {
              ele = clickpages.elem.children('li.active').next();
            } else {
              clickpages.newPages('next', page1 + 1);
              ele = clickpages.elem.children('li.active');
            }
            break;
           case '上一頁':
            if (page1 == '1') {
              return;
            }
            if (page1 >= (clickpages.num - 1) || page1 <= 3 || clickpages.num <= 6) {
              ele = clickpages.elem.children('li.active').prev();
            } else {
              clickpages.newPages('prev', page1 - 1);
              ele = clickpages.elem.children('li.active');
            }
            break;
           case '首頁':
            if (page1 == '1') {
              return;
            }
            if (clickpages.num > 6) {
              clickpages.newPages('首頁', 1);
            }
            ele = clickpages.elem.children('li[page=1]');
            break;
           case '尾頁':
            if (page1 == clickpages.num) {
              return;
            }
            if (clickpages.num > 6) {
              clickpages.newPages('尾頁', clickpages.num);
            }
            ele = clickpages.elem.children('li[page=' + clickpages.num + ']');
            break;
           case '...':
            return;
         }
        } else {
        //   if ((parseInt(txt) >= (clickpages.num - 3) || parseInt(txt) <= 3) && clickpages.num > 6) {
        //    clickpages.newPages('jump', parseInt(txt));
        //   }
        //   ele = $(this);
        // }
        // page = clickpages.actPages(ele);
        // if (page != '' && page != page1) {
        //   if (clickpages.callback){
        //    clickpages.callback(parseInt(page));
        //   }
        var i = parseInt(txt);
        if(isNaN(i)||(i<=0)||i>clickpages.num){
         return;
        }else if(clickpages.num>6){
         clickpages.newPages('jump',i);
        }else{
         var ele = clickpages.elem.children('li[page='+i+']');
         clickpages.actPages(ele);
         if (clickpages.callback){
           clickpages.callback(i);
         }
         return;
        }
        if (clickpages.callback){
         clickpages.callback(i);
        }
        }
      });
     },
     //active
     actPages:function (ele) {
      ele.addClass('active').siblings().removeClass('active');
      return clickpages.elem.children('li.active').text();
     },
     JumpPages:function () {
      this.elem.next('div.pageJump').children('.button').click(function(){
        var i = parseInt($(this).siblings('input').val());
        if(isNaN(i)||(i<=0)||i>clickpages.num){
         return;
        }else if(clickpages.num>6){
         clickpages.newPages('jump',i);
        }else{
         var ele = clickpages.elem.children('li[page='+i+']');
         clickpages.actPages(ele);
         if (clickpages.callback){
           clickpages.callback(i);
         }
         return;
        }
        if (clickpages.callback){
         clickpages.callback(i);
        }
      })
     },
     //newpages
     newPages:function (type, i) {
      var html = "",htmlLeft="",htmlRight="",htmlC="";
      var HL = '<li><a>...</a></li>';
      html = '<li class="topEnd"><a aria-label="Previous">首頁</a></li>'
      for (var n = 0;n<5;n++){
        htmlC += '<li '+((n-1)==0?'class="active"':'')+' page="'+(i+n-1)+'"><a>'+(i+n-1)+'</a></li>';
        htmlLeft += '<li '+((n+2)==i?'class="active"':'')+' page="'+(n+2)+'"><a>'+(n+2)+'</a></li>';
        htmlRight += '<li '+((set.num+n-5)==i?'class="active"':'')+' page="'+(set.num+n-5)+'"><a>'+(set.num+n-5)+'</a></li>';
      }
      switch (type) {
        case "next":
         if(i<=4){
           html+='<li page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         }else if(i>=(set.num-3)){
           html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         }else{
           html += '<li page="1"><a>1</a></li>'+HL+htmlC+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         }
         break;
        case "prev":
         if(i<=4){
           html+='<li page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         }else if(i>=(set.num-3)){
           html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         }else{
           html += '<li page="1"><a>1</a></li>'+HL+htmlC+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         }
         break;
        case "首頁" :
         html+='<li class="active" page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         break;
        case "尾頁" :
         html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li class="active" page="'+set.num+'"><a>'+set.num+'</a></li>';
         break;
        case "jump" :
         if(i<=4){
           if(i==1){
            html+='<li class="active" page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
           }else{
            html+='<li page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
           }
         }else if((i>=set.num-3)&&(set.num>=7)){
           if(i==set.num){
            html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li class="active" page="'+set.num+'"><a>'+set.num+'</a></li>';
           }else{
            html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
           }
         }else{
           html += '<li page="1"><a>1</a></li>'+HL+htmlC+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         }
      }
      html += '<li class="topEnd"><a aria-label="Next">尾頁</a></li>';
      if (this.num > 5 || this.num < 3) {
        set.elem.html(html);
        clickpages.init({num:set.num,elem:set.elem,callback:set.callback});
      }
     }
   }
   if(set.num<=1){
     $(".pagination").html('');
     return;
   }else if(parseInt(set.num)<=6){
     n = parseInt(set.num);
     var html='<li class="topEnd"><a aria-label="Previous">首頁</a></li>';
     for(var i=1;i<=n;i++){
      if(i==set.startnum){
        html+='<li class="active" page="'+i+'"><a>'+i+'</a></li>';
      }else{
        html+='<li page="'+i+'"><a>'+i+'</a></li>';
      }
     }
     html +='<li class="topEnd"><a aria-label="Next">尾頁</a></li>';
     set.elem.html(html);
     clickpages.init();
   }else{
     clickpages.newPages("jump",set.startnum)
   }
}

上面是 pager.js部分

html部分

<script type="text/javascript" charset="utf-8" src="/template/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/template/js/pager.js"></script>
</head>
<div class="dataListPag">
  <ul class="pagination" id="page1">
  </ul>
  <div class="pageJump">
   <span>前往</span>
   <input type="text"/>
   <span>頁</span>
   <button type="button" class="button">GO</button>
  </div>
</div>
<script>
Page({
  num:{$page_mum},        //頁碼數(shù)
  startnum:{$page},      //當(dāng)前頁面有列表切換，在列表切換的時候修改數(shù)字，跳轉(zhuǎn)到當(dāng)前頁
  elem:$('#page1'),   //指定的元素
  callback:function(n){ //回調(diào)函數(shù)
   // 在這里請求當(dāng)前跳轉(zhuǎn)需要用到的數(shù)據(jù)
//  alert('跳轉(zhuǎn)到第'+n+'頁，請求此頁數(shù)據(jù)，此頁有列表切換');
   window.location.href='id=xigua_re:system_msg&op=private_msglist&page='+n;
  }
});
// 數(shù)據(jù)列表的循環(huán)獲取
$('.userArticleType li').on('click',function () {
  $('.userArticleType li').removeClass('choose');
  $(this).addClass('choose')
})
</script>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: