原生js分页器插件

 window.page =  function page(ele, para) {
        this.ele = document.querySelector(ele);

        this.options = {
            count: 100,
            pageSize: 8,
            showPage: 5,
            prevContent:"<上一页",
            nextContent:">下一页",
            currentPage:1,
           callBack:function () {

            }
        }
        this.extend(para);
        this.currentPage = this.options.currentPage;
        this.totalPage = Math.ceil(this.options.count / this.options.pageSize);
        this.sideNum = Math.floor(this.options.showPage / 2);
        this.create();
    }

    page.prototype.extend = function(para) {
        for(var i in para) {
            this.options[i] = para[i];
        }
    }

    page.prototype.create = function() {
        var that = this;

        this.prev = document.createElement("div");
        this.prev.className = "prev";
        this.prev.innerHTML = this.options.prevContent;
        this.ele.appendChild(this.prev);

        this.content = document.createElement("ul");
        this.content.className = "middle";

        this.ele.appendChild(this.content);

        this.next = document.createElement("div");
        this.next.className = "next";
        this.next.innerHTML = this.options.nextContent;
        this.ele.appendChild(this.next);
        this.createPage();
        //上一页的点击事件
        this.prev.onclick = function() {
            that.currentPage--;
            if(that.currentPage < 1) {
                that.currentPage = 1;
            }
            if(this.className == "prev"){
                that.createPage();
            }
        }
        //下一页的点击事件
        this.next.onclick = function() {
            that.currentPage++;
            if(that.currentPage > that.totalPage) {
                that.currentPage = that.totalPage;
            }
            if(this.className=="next"){
                that.createPage();
            }

        }
    }

    page.prototype.createPage = function() {
        var that = this;

        that.options.callBack(that.currentPage,that.options.pageSize);
        this.content.innerHTML = "";
        var offsetSize = this.getOffetSize();
        this.prev.className = "prev";
        this.next.className = "next";
        if(that.currentPage == 1){
            //第一个
            this.prev.className = "prev disabled";
        }
        if(that.currentPage >= this.totalPage){
            this.next.className = "next disabled";
        }

        for(var i = offsetSize.start; i <= offsetSize.end; i++) {
            var li = document.createElement("li");
            li.innerHTML = i;
            if(i == that.currentPage) {
                li.className = "active";
            }
            this.content.appendChild(li);
            li.onclick = function() {
                that.currentPage = +this.innerHTML;
                that.createPage();
            }
        }
    }

    page.prototype.getOffetSize = function() {
        var start = 1;
        var end = this.options.showPage;
        if(this.currentPage >= this.totalPage){
            this.currentPage = this.totalPage;
        }
        if(this.totalPage < this.options.showPage) {
            return {
                start: 1,
                end: this.totalPage
            }
        }
        start = this.currentPage - this.sideNum;
        end = this.currentPage + this.sideNum;
        if(start < 1) {
            start = 1;
            end = this.options.showPage;
        }
        if(end > this.totalPage) {
            end = this.totalPage;
            start = this.totalPage - 2 * this.sideNum;
        }
        return {
            start: start,
            end: end
        }
    }

　　

function newPage(opt) {
         var pageCom = new page(".page", {
                count: opt.count,
                currentPage:opt.currentPage,
                pageSize: pageSize,
                showPage: 5,
                prevContent: "<上一页",
                nextContent: ">下一页",
                callBack:function (index,size) {
                    console.log(index,size);

                }
            });
        }

　　

 ._page{
	width: 100%;
	height: 30px;
	padding:20px 0;
	margin-top: 30px;
	margin-bottom: 40px;
	text-align: right;
}

 ._page .prev,
._page .next {
	display: inline-block;
	width: 80px;
	height: 30px;
	background: #3385ff;
	line-height: 30px;
	text-align: center;
	color: #fff;
	vertical-align: middle;
	 cursor: pointer;
}
._page .disabled{
	cursor: not-allowed;
	background: #ccc;
}

._page .next {
	margin-left: 4px;
}

 ._page .middle {
	list-style: none;
	display: inline-block;
	vertical-align: middle;
}

._page .middle li {
	width: 30px;
	height: 30px;
	background: #666;
	line-height: 30px;
	text-align: center;
	color: #fff;
	margin-left: 4px;
	float: left;
}

 ._page .middle li.active {
	background: limegreen;
}