function Paging(options) { let defaultValue = { total: 0, current: 1, firstText: '首页', prevText: '上一页', nextText: '下一页', lastText: '尾页', PageSize: 10, PageNum: 5, container: document.getElementsByClassName('paging')[0] } this.options = Object.assign({}, defaultValue, options); this.show(); this.PageClick() } Paging.prototype.show = function () { let disable = ""; let PageTotalNum = this.getPageTotalNum(); this.options.container.innerHTML = ""; if(this.options.current === 1){ disable = 'disable' } this.createElement('first ' + disable, this.options.firstText); this.createElement('prev ' + disable, this.options.prevText); this.createNumElement(); disable = "" if(this.options.current === PageTotalNum){ disable = 'disable' } this.createElement('next ' + disable, this.options.nextText); this.createElement('last ' + disable, this.options.lastText); let span = document.createElement('span'); let i = `${this.options.current} /${PageTotalNum}`; span.innerHTML = i; this.options.container.appendChild(span) } Paging.prototype.createNumElement = function() { let min = this.options.current - Math.floor(this.options.PageNum / 2); if(min < 1) { min = 1; } let max = min + this.options.PageNum - 1; let PageTotalNum = this.getPageTotalNum(); if (max > PageTotalNum){ max = PageTotalNum; } let active = ""; for(let i = min; i <= max; i ++) { if(this.options.current === i) { active = 'active'; }else{ active = ''; } this.createElement('pagingDiv ' + active, i); } } Paging.prototype.createElement = function(specialStyle, content) { let oDiv = document.createElement('div'); oDiv.className = specialStyle; oDiv.innerText = content; this.options.container.appendChild(oDiv); } Paging.prototype.getPageTotalNum = function() { return Math.ceil(this.options.total / this.options.PageSize) } Paging.prototype.PageClick = function() { let _this = this; let PageTotalNum = this.getPageTotalNum(); this.options.container.addEventListener('click', function(e) { if(e.target.classList.contains('first')){ _this.toPage(1); } else if (e.target.classList.contains('prev')) { _this.toPage(_this.options.current - 1); } else if (e.target.classList.contains('next')) { _this.toPage(_this.options.current + 1); } else if (e.target.classList.contains('last')) { _this.toPage(PageTotalNum); } else if(e.target.classList.contains('pagingDiv')){ _this.toPage(+e.target.innerText); } }) } Paging.prototype.toPage = function (page){ let PageTotalNum = this.getPageTotalNum(); if(page < 1) { page = 1; } if(page > PageTotalNum){ page = PageTotalNum; } this.options.current = page; this.options.pageChange && this.options.pageChange(page); this.show() }