原生js实现分页功能

原生就是实现分页功能

代码如下：

var pagination = function(option,fun){
    this.parentId = option.id;                             //容器
    this.pageSize = option.pageSize || 1;                  //每页显示多少条
    this.totals = option.totals || 0;                      //总条目数
    this.currentPage = option.currentPage || 1;            //当前页
    this.showFirstBtn = option.showFirstBtn || false;      //显示首页按钮
    this.showLastBtn = option.showLastBtn || false;        //显示尾页按钮
    this.totalPage = Math.ceil(this.totals / this.pageSize);//总页数
    this.firstText = '首页';
    this.lastText = '尾页';
    this.preText = '上一页';
    this.nextText = '下一页';
    this.goText = '跳转至';
    /**
     * 创建dom元素
     */
    this.createDom = function(nodeName,attr,text){
        var el = document.createElement(nodeName);
        if(attr){
            for(var key in attr){
                el.setAttribute(key,attr[key]);
            }
        }
        if(text){
            el.innerText = text;
        }
        return el;
    }
    /**
     * 添加className
     */
    this.addClass = function(ele,className){
        var oldClass = ele.className.split(' ');
        if(oldClass.indexOf(className) < 0){
            oldClass.push(className);
            ele.className = oldClass.join(' ');
        }
    }
    /**
     * 删除class
     */
    this.delClass = function(ele,className){
        var classArr = ele.className.split(' ');
        classArr.forEach(function(name,i){
            if(name == className){
                classArr.replace(i,1);
            }
        });
        ele.className = classArr;
    }
    /**
     * 是否包含class
     */
    this.hasClass = function(ele,className){
        var classArr = ele.className.split(' ');
        return classArr.indexOf(className) < 0 ? false : true;
    }
    var self = this;
    this.refshPage = function(index){
        self.currentPage = index;
        fun(index);
        self.renderPage();
        var pageParent = document.getElementById(self.parentId);
        if(index == 1){
            self.addClass(pageParent.querySelector('.preBtn'),'btnDisabled');
            
        }else if(index == self.totalPage){
            self.addClass(pageParent.querySelector('.nextBtn'),'btnDisabled');
        }else{
            self.delClass(pageParent.querySelector('.preBtn'),'btnDisabled');
            self.delClass(pageParent.querySelector('.nextBtn'),'btnDisabled');
        }
    }
    /**
     * 生成分頁dom
     */
    this.getPageDom = function(index,totalPage){
        var pageBox = self.createDom('div',{class:'pageBox'});
        var firstBtn = self.createDom('span',{class:'firstBtn'},self.firstText);
        var lastBtn = self.createDom('span',{class:'lastBtn'},self.lastText);
        var preBtn = self.createDom('span',{class:'preBtn'},self.preText);
        var nextBtn = self.createDom('span',{class:'nextBtn'},self.nextText);
        if(self.showFirstBtn){
            pageBox.appendChild(firstBtn);
        }
        if(self.showLastBtn){
            pageBox.appendChild(lastBtn);
        }
        firstBtn.onclick = function(){
            self.refshPage(1);
        }
        lastBtn.onclick = function(){
            self.refshPage(totalPage);
        }
        preBtn.onclick = function(){
            var index = --self.currentPage;
            if(index < 1)index = 1;
            self.refshPage(index);
        }
        nextBtn.onclick = function(){
            var index = ++self.currentPage;
            if(index > totalPage)index = totalPage;
            self.refshPage(index);
        }
        pageBox.appendChild(preBtn);
        if(totalPage <= 10){
            for(var i = 1; i <= totalPage; i++){
                var page = self.createDom('span',{class:'pageNum'},i);
                if(i == index){
                    self.addClass(page,'pageActive');
                    
                } 
                pageBox.appendChild(page);
                (function(i){
                    page.onclick = function(){
                        self.refshPage(i);
                    }
                })(i);
            }
            pageBox.appendChild(nextBtn);
        }else{
            if(index <= 5){
                for(var i = 1; i < 9; i++){
                    var page = self.createDom('span',{class:'pageNum'},i);
                    if(i == index) self.addClass(page,'pageActive');
                    pageBox.appendChild(page);
                    (function(i){
                        page.onclick = function(){
                            self.refshPage(i);
                        }
                    })(i);
                }
                pageBox.appendChild(self.createDom('span',{class:'dots'},'...'));
                var lastPage = self.createDom('span',{class:'pageNum'},totalPage);
                pageBox.appendChild(lastPage);
                lastPage.onclick = function(){
                    self.refshPage(totalPage);
                }
                pageBox.appendChild(nextBtn);
            }
            if(index >= (totalPage - 4)){
                var firstPage = self.createDom('span',{class:'pageNum'},1);
                firstPage.onclick = function(){
                    self.refshPage(1);
                }
                pageBox.appendChild(firstPage);
                pageBox.appendChild(self.createDom('span',{class:'dots'},'...'));
                for(var i = totalPage - 9; i <= totalPage; i++){
                    var page = self.createDom('span',{class:'pageNum'},i);
                    if(i == index) self.addClass(page,'pageActive');
                    pageBox.appendChild(page);
                    (function(i){
                        page.onclick = function(){
                            self.refshPage(i);
                        }
                    })(i);
                }
                pageBox.appendChild(nextBtn);
            }
            if(index > 5 && index < (totalPage - 4)){
                var firstPage = self.createDom('span',{class:'pageNum'},1);
                firstPage.onclick = function(){
                    self.refshPage(1);
                }
                pageBox.appendChild(self.createDom('span',{class:'dots'},'...'));
                for(var i = index - 3; i <= index + 3; i++){
                    var page = self.createDom('span',{class:'pageNum'},i);
                    if(i == index) self.addClass(page,'pageActive');
                    pageBox.appendChild(page);
                    (function(i){
                        page.onclick = function(){
                            self.refshPage(i);
                        }
                    })(i);
                }
                pageBox.appendChild(self.createDom('span',{class:'dots'},'...'));
                var lastPage = self.createDom('span',{class:'pageNum'},totalPage);
                pageBox.appendChild(lastPage);
                lastPage.onclick = function(){
                    self.refshPage(totalPage);
                }
                pageBox.appendChild(nextBtn);
            }
        }
        if(index == 1){
            self.addClass(preBtn,'btnDisabled');
        }else if(index == totalPage){
            self.addClass(nextBtn,'btnDisabled');
        }
        if(self.showLastBtn){
            pageBox.appendChild(lastBtn);
        }
        return pageBox;
    };
    /**
     * 渲染page
     */
    this.renderPage = function(){
        var pageParent = document.getElementById(self.parentId);
        var pagesDom = self.getPageDom(self.currentPage,self.totalPage);
        pageParent.innerHTML = '';
        pageParent.appendChild(pagesDom);
    }
    this.renderPage();
}

　　调用方法：

new pagination({
            id:dataStore.pageId, 
            pageSize:dataStore.pageSize,
            totals:data.length,
            currentPage:1
        },function(index){
            var startNum = (index - 1 ) * dataStore.pageSize;
            var endNun = index * dataStore.pageSize;
            var listData = data.slice(startNum,endNun);
            renderMain(listData);
        });

　　

分页效果：