原生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); });
分页效果: