封装基于JQ翻页插件

js

(function ($) {
    function init(dom, args) {
        if (args.current <= args.pageCount) {
            fillHtml(dom, args);
            bindEvent(dom, args);
        } else {
            alert('请输入正确页数')
        }
    };
    
    function fillHtml(dom, args) {
        dom.empty();
        //上一页
        if (args.current > 1) {
            dom.append('上一页');
        } else {
            dom.remove('.prevPage');
            dom.append('上一页');
        }
        //中间页数
        if (args.current != 1 && args.current >= 4 && args.pageCount != 4) {
            dom.append('' + 1 + '');
        }
        if (args.current - 2 > 2 && args.current <= args.pageCount && args.pageCount > 5) {
            dom.append('...');
        }
        var start = args.current - 2;
        var end = args.current + 2;
        for (; start <= end; start++) {
            if (start <= args.pageCount && start >= 1) {
                if (start != args.current) {
                    dom.append('' + start + '');
                } else {
                    dom.append('' + start + '');
                }
            }
        }

         
        if (args.current + 2 < args.pageCount - 1 && args.pageCount > 5) {
            dom.append('...')
        }

        if (args.current != args.pageCount && args.current < args.pageCount - 2 && args.pageCount != 4) {
            dom.append('' + args.pageCount + '');
        }
        //下一页
        if (args.current < args.pageCount) {
            dom.append('下一页');
        } else {
            dom.remove('.nextPage');
            dom.append('下一页');
        }
    };

    function bindEvent(obj, args) {
        //点击页码
        obj.on('click', '.tcdNumber', function () {
            var current = parseInt($(this).text());
            changePage(obj,args,current);
        })
        //上一页
        // a.prevPage   规定只能添加到指定的子元素上的事件处理程序
        obj.on('click', '.prevPage', function () {
            var current = parseInt(obj.children('.current').text());
            changePage(obj,args,current-1);            
        })
        //下一页
        obj.on('click', '.nextPage', function () {
            var current = parseInt(obj.children('.current').text());
            changePage(obj,args,current + 1);
        })
    };

    function changePage(dom, args,page) {
        fillHtml(dom, { 'current': page, 'pageCount': args.pageCount });
        if (typeof (args.backFn == "function")) {
            args.backFn(page);
        }
    }

    $.fn.createPage = function (options) {
        var args = $.extend({
            pageCount: 5,
            current: 2,
            backFn: function () { }
        }, options);
        init(this, args)
    }
})(jQuery)；

css

*{
    margin:0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
.page{
    width:500px;
    margin:100px auto;
    color: #ccc;
}
.page a{
    display: inline-block;
    color: #428bca;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    border: 1px solid #ddd;
    margin: 0 2px;
    border-radius: 4px;
    vertical-align: middle;
}
.page a:hover{
    border: 1px solid #428bca;
}
.page .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;
}
.page .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;
}

html