js原生分页

class Page{
    constructor(ops){
        this.length = ops.length;
        this.num = ops.num || 2;
        this.prev = ops.prev;
        this.next = ops.next;
        this.pageList = ops.pageList;
        this.index = ops.index || 0;
        this.data = ops.data;
        this.cont = ops.cont;
        // 创建页码
        this.createPage();
        this.addEvent();
        this.display();
    }
    createPage(){
        this.max = Math.ceil(this.length/this.num);
        let str = "";
        for(let i=0;i<this.max;i++){
            str += `<li>${i+1}</li>`;
        }
        this.pageList.innerHTML = str;

        this.li = this.pageList.children;
        this.setActive();
    }
    setActive(){
        for(let i=0;i<this.li.length;i++){
            this.li[i].style.background = "";
        }
        this.li[this.index].style.background = "red";
    }
    addEvent(){
        var that = this;
        this.prev.onclick = function(){
            if(that.index == 0){
                that.index = 0;
            }else{
                that.index--;
            }
            that.setActive();
            that.display();
        }
        this.next.onclick = function(){
            if(that.index == that.max-1){
                that.index = that.max-1;
            }else{
                that.index++;
            }
            that.setActive();
            that.display();
        }
    }
    display(){
        var str = "";
        for(var i=this.index*this.num; i<(this.index+1)*this.num; i++){
            if(i<this.data.length){
                str += `<tr index="${this.data[i].id}">
                    <td>${this.data[i].user}</td>
                    <td>${this.data[i].age}</td>
                    <td>${this.data[i].result}</td>
                    <td><span class="delete btn">删除</span></td>
                    <td><span class="update btn updateBtn">修改</span></td>
                </tr>`;
            }
        }
        this.cont.innerHTML = str;
    }
}