Maison > Article > interface Web > Comment obtenir un effet de pagination en utilisant jquery.page.js

Comment obtenir un effet de pagination en utilisant jquery.page.js

亚连original: 2018-06-14 14:57:512745parcourir

Cet article présente principalement en détail l'effet de pagination basé sur jquery.page.js, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Basé sur jquery.page.js Un effet de pagination simple pour. votre référence, le contenu spécifique est le suivant

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>简单的jQuery分页插件</title> 
<style> 
*{ margin:0; padding:0; list-style:none;} 
a{ text-decoration:none;} 
a:hover{ text-decoration:none;} 
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;} 
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;} 
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;} 
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;} 
.tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;} 
</style> 
</head> 
<body> 
<br><br><br> 
 
<p class="tcdPageCode"></p> 
 
<center><pre class="brush:php;toolbar:false"><br>

La méthode d'appel est la suivante :

$(".tcdPageCode").createPage({
pageCount:10,
current:1,
backFn:function(p){
//单击回调方法，p是当前页码
}
});

pageCount : nombre total de pages
current : page actuelle

Ce qui suit est le code source de jquery.page.js :

(function($){ 
  var ms = { 
    init:function(obj,args){ 
      return (function(){ 
        ms.fillHtml(obj,args); 
        ms.bindEvent(obj,args); 
      })(); 
    }, 
    //填充html 
    fillHtml:function(obj,args){ 
      return (function(){ 
        obj.empty(); 
        //上一页 
        if(args.current > 1){ 
          obj.append(&#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="prevPage">上一页</a>&#39;); 
        }else{ 
          obj.remove(&#39;.prevPage&#39;); 
          obj.append(&#39;<span class="disabled">上一页</span>&#39;); 
        } 
        //中间页码 
        if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ 
          obj.append(&#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tcdNumber">&#39;+1+&#39;</a>&#39;); 
        } 
        if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){ 
          obj.append(&#39;<span>...</span>&#39;); 
        } 
        var start = args.current -2,end = args.current+2; 
        if((start > 1 && args.current < 4)||args.current == 1){ 
          end++; 
        } 
        if(args.current > args.pageCount-4 && args.current >= args.pageCount){ 
          start--; 
        } 
        for (;start <= end; start++) { 
          if(start <= args.pageCount && start >= 1){ 
            if(start != args.current){ 
              obj.append(&#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tcdNumber">&#39;+ start +&#39;</a>&#39;); 
            }else{ 
              obj.append(&#39;<span class="current">&#39;+ start +&#39;</span>&#39;); 
            } 
          } 
        } 
        if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){ 
          obj.append(&#39;<span>...</span>&#39;); 
        } 
        if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){ 
          obj.append(&#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tcdNumber">&#39;+args.pageCount+&#39;</a>&#39;); 
        } 
        //下一页 
        if(args.current < args.pageCount){ 
          obj.append(&#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nextPage">下一页</a>&#39;); 
        }else{ 
          obj.remove(&#39;.nextPage&#39;); 
          obj.append(&#39;<span class="disabled">下一页</span>&#39;); 
        } 
      })(); 
    }, 
    //绑定事件 
    bindEvent:function(obj,args){ 
      return (function(){ 
        obj.on("click","a.tcdNumber",function(){ 
          var current = parseInt($(this).text()); 
          ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current); 
          } 
        }); 
        //上一页 
        obj.on("click","a.prevPage",function(){ 
          var current = parseInt(obj.children("span.current").text()); 
          ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current-1); 
          } 
        }); 
        //下一页 
        obj.on("click","a.nextPage",function(){ 
          var current = parseInt(obj.children("span.current").text()); 
          ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current+1); 
          } 
        }); 
      })(); 
    } 
  } 
  $.fn.createPage = function(options){ 
    var args = $.extend({ 
      pageCount : 10, 
      current : 1, 
      backFn : function(){} 
    },options); 
    ms.init(this,args); 
  } 
})(jQuery);

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus