自己编写JQuery扩展分页插件

背景

公司分页插件用到了kkpager
https://github.com/pgkk/kkpager
缺点：不是绑定Dom节点的初始化方式，单页面只能使用一个分页插件，假如一个页面有多个分页需求就不行了，前端给出来的解决方案是复制多份，假如有100个分页呢？难道复制100份？

故让前端基于原有的样式重写了一个HTML分页Dom，我在此基础上修改
前端给过来的Html内容如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>分页</title>
        <link rel="stylesheet" href="pager.css" />
    </head>
    <body>
        <div class="pageBox">
            <span>
                <!--<a href="javascript:void(0);" title="首页">首页</a>
                <a href="javascript:void(0);" title="上一页">上一页</a>
                <a href="javascript:void(0);" title="第一页">1</a>-->
                <span title="首页" class="disabled">首页</span>
                <span title="上一页" class="disabled">上一页</span>
                <span title="第一页" class="curr">1</span>
                <a href="javascript:void(0);" title="第二页">2</a>
                <a href="javascript:void(0);" title="第三页">3</a>
                <a href="javascript:void(0);" title="第四页">4</a>
                <a href="javascript:void(0);" title="第五页">5</a>
                <a href="javascript:void(0);" title="第六页">6</a>
                <span>...</span>
                <a href="javascript:void(0);" title="下一页">下一页</a>
                <a href="javascript:void(0);" title="尾页">尾页</a>
            </span>
            <span>
                当前第 <span class="colorRed">1</span> 页/共<span>6</span>页
                转到第<input type="text" value="" class="gopage"/>页
            </span>
        </div>
    </body>
</html>

功能说明

JQuery拓展插件功能说明：
1、插件使用在Ajax无刷新数据加载和分页的情况
2、自动忽略中间页面

使用说明：
1、Head里面加载Css和JS
<link rel="stylesheet" href="pager.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js" ></script>

2、中间Body加上
<div class="pageBox">
    <span class="pageSpan"></span>
</div>

3、body结束后，加载JS
<script type="text/javascript" src="pager.js" ></script>

4、初始化分页
<script>
$(function() {
    //分页
    $(".pageSpan").createPage({
        pageIndex:8,
        totalPage:22,
        backFn:function(pageIndex){
            console.log(pageIndex);
        }
    });
});
</script>

page.js

/**
 * @Description 分页插件，使用该插件，必须放在底部，等Dom节点渲染完毕才能使用
 * @Author Nick
 * @Date 2016/07/30
 * @Version 1.0
 */
(function($) {
    var pager = {
        init : function(obj, page) {
            return (function() {
                pager.fillHtml(obj, page);
                pager.bindEvent(obj, page);
            })();
        },

        //填充Html
        fillHtml : function(pageSpan, page) {
            return (function() {
                pageSpan.empty();
                //首页 上一页
                if(page.pageIndex > 1) {
                    pageSpan.append('<a href="javascript:;" title="首页" class="firstPage">首页</a>');
                    pageSpan.append('<a href="javascript:;" title="上一页" class="prevPage">上一页</a>');
                } else {
                    pageSpan.append('<span title="首页" class="disabled">首页</span>');
                    pageSpan.append('<span title="上一页"  class="disabled">上一页</span>');
                }

                //中间页码
                if(page.totalPage <= 3) {
                    for(var i = 1; i <= page.totalPage; i++) {
                        if(page.pageIndex == i) {
                            pageSpan.append('<span title="第'+i+'页"  class="curr">'+i+'</span>');
                        } else {
                            pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
                        }
                    }
                } else if(page.totalPage > 3) {
                    if(page.pageIndex - 2 <= 1 && page.pageIndex +2 <= page.totalPage) {
                        for(var i = 1; i <= (page.pageIndex +2); i++) {
                            if(page.pageIndex == i) {
                                pageSpan.append('<span title="第'+i+'页"  class="curr">'+i+'</span>');
                            } else {
                                pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
                            }
                        }
                        pageSpan.append('<span>...</span>');
                    } else if(page.pageIndex - 2 > 1 && page.pageIndex +2 >= page.totalPage) {
                        pageSpan.append('<span>...</span>');
                        for(var i = (page.pageIndex - 2); i <= page.totalPage; i++) {
                            if(page.pageIndex == i) {
                                pageSpan.append('<span title="第'+i+'页"  class="curr">'+i+'</span>');
                            } else {
                                pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
                            }
                        }
                    } else if(page.pageIndex - 2 <= 1 && page.pageIndex +2 >= page.totalPage) {
                        for(var i = 1; i <= page.totalPage; i++) {
                            if(page.pageIndex == i) {
                                pageSpan.append('<span title="第'+i+'页"  class="curr">'+i+'</span>');
                            } else {
                                pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
                            }
                        }
                    } else if(page.pageIndex - 2 > 1 && page.pageIndex +2 <= page.totalPage) {
                        pageSpan.append('<span>...</span>');
                        for(var i = (page.pageIndex - 2); i <= (page.pageIndex + 2); i++) {
                            if(page.pageIndex == i) {
                                pageSpan.append('<span title="第'+i+'页"  class="curr">'+i+'</span>');
                            } else {
                                pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
                            }
                        }
                        pageSpan.append('<span>...</span>');
                    }
                }


                //下一页、尾页
                if(page.pageIndex != page.totalPage) {
                    pageSpan.append('<a href="javascript:;" title="下一页" class="nextPage">下一页</a>');
                    pageSpan.append('<a href="javascript:;" title="尾页" class="endPage">尾页</a>');
                } else {
                    pageSpan.append('<span title="上一页"  class="disabled">下一页</span>');
                    pageSpan.append('<span title="尾页"  class="disabled">尾页</span>');
                }
                pageSpan.append('<span>当前第 <span class="colorRed">'+page.pageIndex+'</span> 页/共<span>'+page.totalPage+'</span>页');
            })();
        },

        //绑定事件
        bindEvent : function(obj, page) {
            //第几页
            return (function() {
                //数字点击事件
                obj.off('click', 'a.tcdNumber');
                obj.off('click', 'a.prevPage');
                obj.off('click', 'a.nextPage');
                obj.off('click', 'a.firstPage');
                obj.off('click', 'a.endPage');
                obj.on('click', 'a.tcdNumber', function() {
                    var pageIndex = parseInt($(this).html());
                    pager.fillHtml(obj, {"pageIndex":pageIndex, "totalPage":page.totalPage});
                    if(typeof(page.backFn == "function")) {
                        page.backFn(pageIndex);
                    }
                });
                //前一页点击事件
                obj.on('click', 'a.prevPage', function() {
                    var pageIndex = parseInt(obj.children('span.curr').html());
                    pager.fillHtml(obj, {"pageIndex":pageIndex-1, "totalPage":page.totalPage});
                    if(typeof(page.backFn == "function")) {
                        page.backFn(pageIndex-1);
                    }
                });
                //下一页点击事件
                obj.on('click', 'a.nextPage', function() {
                    var pageIndex = parseInt(obj.children('span.curr').html());
                    pager.fillHtml(obj, {"pageIndex":pageIndex+1, "totalPage":page.totalPage});
                    if(typeof(page.backFn == "function")) {
                        page.backFn(pageIndex+1);
                    }
                });
                //首页
                obj.on('click', 'a.firstPage', function() {
                    pager.fillHtml(obj, {"pageIndex":1, "totalPage":page.totalPage});
                    if(typeof(page.backFn == "function")) {
                        page.backFn(1);
                    }
                });
                //尾页
                obj.on('click', 'a.endPage', function() {
                    pager.fillHtml(obj, {"pageIndex":page.totalPage, "totalPage":page.totalPage});
                    if(typeof(page.backFn == "function")) {
                        page.backFn(page.totalPage);
                    }
                });
            })();
        }
    }

    //扩展JQuery
    $.fn.createPage = function(options) {
        var page = $.extend({
            pageIndex : 1,
            totalPage : 10,
            backFn : function(p) {
            }
        }, options);
        pager.init(this, page);
    }
})(jQuery);

pager.css


.pageBox{
    text-align: center;
    margin: 20px auto;
    color: #999;
    font-size: 14px;
}
.pageBox a{
    float: none;
    border: 1px solid #d5d5d5;
    height: 28px;
    line-height: 28px;
    padding: 0 9px;
    display: inline-block;
    cursor: pointer;
    background: #fff;
    text-decoration: none;
    color: #333;
    margin-right: 5px;
}
.pageBox a:hover{
    border-color: #999999;
}
.pageBox .colorRed{
    color: red;
}
.pageBox .gopage{
    width: 36px;
    height: 22px;
    line-height: 22px;
    color: #999;
    text-align: center;
    margin-left: 1px;
    margin-right: 1px;
    border: 1px solid #c3c3c3;
    position: relative;
    left: 0px;
    top: 0px;
    outline: none;
}
.pageBox .curr{
    background: none repeat scroll 0 0 #c3c3c3;
    color: #fff;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    z-index: 999;
    margin-right: 5px;
    display: inline-block;
}
.pageBox .disabled{
    float: none;
    display: inline-block;
    padding: 0 9px;
    margin-right: 5px;
    border: 1px solid #d5d5d5;
    background-color: #FFF;
    color: #DFDFDF;
    line-height: 28px;
}