How to create paging effect with jquery

This time I will show you how to create a paging effect with jquery. What are the precautions for using jquery to create a paging effect? ​​The following is a practical case, let’s take a look.

A simple paging effect based on jquery.page.js, for your reference, the specific content is as follows

nbsp;html> 
 
 
<meta> 
<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> 
 
 
<br><br><br> 
<p></p> 
<center><pre class="brush:php;toolbar:false"><br> 

  <script></script>  <script></script>  <script> $(".tcdPageCode").createPage({ pageCount:100, current:1, backFn:function(p){ console.log(p); } }); </script>    The calling method is as follows:

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

pageCount: total number of pages

current：Current page

The following is the jquery.page.js source code:

(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('<a>上一页</a>'); 
        }else{ 
          obj.remove('.prevPage'); 
          obj.append('<span>上一页</span>'); 
        } 
        //中间页码 
        if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ 
          obj.append('<a>'+1+'</a>'); 
        } 
        if(args.current-2 > 2 && args.current  5){ 
          obj.append('<span>...</span>'); 
        } 
        var start = args.current -2,end = args.current+2; 
        if((start > 1 && args.current  args.pageCount-4 && args.current >= args.pageCount){ 
          start--; 
        } 
        for (;start = 1){ 
            if(start != args.current){ 
              obj.append('<a>'+ start +'</a>'); 
            }else{ 
              obj.append('<span>'+ start +'</span>'); 
            } 
          } 
        } 
        if(args.current + 2 = 1 && args.pageCount > 5){ 
          obj.append('<span>...</span>'); 
        } 
        if(args.current != args.pageCount && args.current '+args.pageCount+''); 
        } 
        //下一页 
        if(args.current 下一页'); 
        }else{ 
          obj.remove('.nextPage'); 
          obj.append('<span>下一页</span>'); 
        } 
      })(); 
    }, 
    //绑定事件 
    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);

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other php Chinese websites related articles!

Recommended reading:

How to deal with jQuery being unable to trigger binding events when adding elements

Regular verification of mobile phone numbers Formula

How to add and remove the left and right menus in JS

How to encapsulate the animate.css code with jQuery

The above is the detailed content of How to create paging effect with jquery. For more information, please follow other related articles on the PHP Chinese website!