jquery简单的分页插件

先看效果图

第一步：引入jquery

  <script src="http://luopq.com/demo/lib/jquery-1.10.2.min.js"></script>

第二步：引入paging.js

;(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测试

<html>
<head>
    <meta charset="utf-8">
    <title>简单的分页插件</title>
    <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>
</head>
<body>
    <div id="page"></div>
    <script src="http://luopq.com/demo/lib/jquery-1.10.2.min.js"></script>
    <script src="../paging.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#page').paging({pageNo:2,totalPage:10,callback:function(cur){
            console.log(cur);
        }});
    });
    </script>
</body>

</html>