首页 > 程序开发 > web前端 > JavaScript >

jquery.page.js简单的分页效果实现教程

2017-12-14

jquery page js简单的分页效果实现教程。基于jquery page js的一款简单的分页效果:

基于jquery.page.js的一款简单的分页效果:

<!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>  
  
<div class="tcdPageCode"></div>  
  
<center><pre><br>  
</pre></center>  
  
<script src="js/jquery-1.8.3.min.js"></script>  
<script src="js/jquery.page.js"></script>  
<script>  
    $(".tcdPageCode").createPage({  
        pageCount:100,  
        current:1,  
        backFn:function(p){  
            console.log(p);  
        }  
    });  
</script>  
</body>  
</html>  

调用方法如下:

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

pageCount:总页数

current:当前页

以下是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:;" 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:;" 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:;" 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:;" class="tcdNumber">&#39;+args.pageCount+&#39;</a>&#39;);  
                }  
                //下一页  
                if(args.current < args.pageCount){  
                    obj.append(&#39;<a href="javascript:;" 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);  
相关文章
最新文章
热点推荐