html分页

1.CSS

/*
 * 页数按钮样式
 */
.page_div span:nth-of-type(2){
    float: right;    
}
.page_div a:last-child{
    margin-right: 0;
}
.page{
    padding-right: 21px;
}
.page_div a {
    min-width: 30px;
    height: 28px;
    border: 1px solid #a6acb7;
    text-align: center;
    margin: 0 3px;
    cursor: pointer;
    line-height: 28px;
    color: #000;
    font-size: 13px;
    display: inline-block;
    background: #fff;
}

.page_div .current {
    color: #FFFFFF;
    border: none !important;
    background-color: #44884f;

}
.page_div .current:hover{
color: #FFFFFF;
    border: none !important;
    background-color: #44884f;
}
.totalPages {
    margin: 0 10px;
}

.totalPages span,
.totalSize span {
    color: #0073A9;
    margin: 0 5px;
}

/*end分页引用外部样式*/

2.HTML

<div class="p_pager">
                                <p class="page_div" id="page">
                                
                                </p>
                            </div>

3.JS

(function($, window, document, undefined) {
    //定义分页类
    function Paging(element, options) {
        this.element = element;
        //传入形参
        this.options = {
            pageNo: options.pageNo||1,
            totalPage: options.totalPage,
            totalSize:options.totalSize,
            callback:options.callback
        };
        //根据形参初始化分页html和css代码
        this.init();
    }
    //对Paging的实例对象添加公共的属性和方法
    Paging.prototype = {
        constructor: Paging,
        init: function() {
            this.creatHtml();
            this.bindEvent();
            this.pageBtnHover();
        },
        //分页翻页按钮hover效果
        pageBtnHover: function () {
            $("#nextPage")
                .on("mouseout",
                function () {
                    $(this).find("img").attr("src", "/img/rightButtonPage.png");
                });
            $("#prePage")
                .on("mouseout",
                function () {
                    $(this).find("img").attr("src", "/img/leftButtonPage.png");
                });
            $("#nextPage")
                .on("mouseover",
                function () {
                    $(this).find("img").attr("src", "/img/pa_right_per.png");
                });
            $("#prePage")
                .on("mouseover",
                function () {
                    $(this).find("img").attr("src", "/img/pa_left_per.png");
                });
        },
        creatHtml: function () {
             
            var me = this;
            var content = "";
            var current = me.options.pageNo;
            var total = me.options.totalPage;
            var totalNum = me.options.totalSize;
            content += "<span>显示&nbsp;<select id='selectPage'><option>10</option><option>25</option><option>50</option><option>100</option></select>&nbsp;项结果<span class='page'></span>显示第1至" + totalNum+"项结果，共"+total+"页</span>";
            content += "<span><a id='prePage'><img src='/img/leftButtonPage.png'></a>";

            //总页数大于6时候
            if(total > 6) {
                //当前页数小于5时显示省略号
                if(current < 5) {
                    for(var i = 1; i < 6; 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) {
                        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 - 4; i < total + 1; i++) {
                            if(current == i) {
                                content += "<a class='current'>" + i + "</a>";
                            } else {
                                content += "<a>" + i + "</a>";
                            }
                        }
                    }
                }
                //页面总数小于6的时候
            } else {
                for(var i = 1; i < total + 1; i++) {
                    if(current == i) {
                        content += "<a class='current'>" + i + "</a>";
                    } else {
                        content += "<a>" + i + "</a>";
                    }
                }
            }
            content += "<a id='nextPage'><img src='/img/rightButtonPage.png'></a></span>";    
            me.element.html(content);
        },
        //添加页面操作事件
        bindEvent: function() {
            var me = this;
            me.element.off('click', 'a');
            me.element.on('click', 'a', function() {
                var num = $(this).html();
                var id=$(this).attr("id");
                if(id == "prePage") {
                    if(me.options.pageNo == 1) {
                        me.options.pageNo = 1;
                    } else {
                        me.options.pageNo = +me.options.pageNo - 1;
                    }
                } else if(id == "nextPage") {
                    if(me.options.pageNo == me.options.totalPage) {
                        me.options.pageNo = me.options.totalPage
                    } else {
                        me.options.pageNo = +me.options.pageNo + 1;
                    }

                } else if(id =="lastPage") {
                    me.options.pageNo = me.options.totalPage;
                }else{
                    me.options.pageNo = +num;
                }
                me.creatHtml();
                if(me.options.callback) {
                    me.options.callback(me.options.pageNo);
                }
            });
        }
    };
    //通过jQuery对象初始化分页对象
    $.fn.paging = function(options) {
        return new Paging($(this), options);
    }
})(jQuery, window, document);

4.调用

(function ($, window, document, undefined) {
    $.extend({
        pageTest: function (options) {
            var settings = {
                row: 10,
            };
            getData();
            function getData() {
                //调用接口获取数据
                //....
                //显示分页
                showPage();
            }
           
            function showPage(pageNo, total) {
                var totalPage = Math.ceil(total / settings.row);
                $("#page").paging({
                    pageNo: pageNo,
                    totalPage: totalPage,
                    totalSize: total,
                    callback: function (num) {
                        settings.page = num;
                        //调用接口获取数据
                        getData();
                    }
                });
                $("#selectPage").val(settings.row);
            }
        }
    });
  
})(jQuery, window, document);