/** * 分页插件 * css: my-page.css * @param {*} param0 */ const PageHelper = { myPageInit({ pages = 10, currentPage = 1, element = '.my-page', callback }) { this.pages = pages; this.currentPage = currentPage; this.element = element; this.callback = callback; this.intercept(); const myPageEl = document.querySelector(this.element); // 构造结构 let htmlStrArr = []; for (let i = 0; i < this.pages; i++) { htmlStrArr.push(`
  • ${i + 1}
  • `); } if (this.pages > 7) { htmlStrArr.splice( 2, htmlStrArr.length - 6, "
  • ...
  • " ); } htmlStr = htmlStrArr.join(''); let pageHtmlStr = `
    <
    >
    `; // 注入结构 myPageEl.innerHTML = pageHtmlStr; // 标记默认页 this.clickPageFun(this.currentPage); // 上下页切换事件注册 let btns = document.querySelectorAll(`${this.element} div`); btns.forEach((el) => { el.onclick = this.switchPage; }); // 点击事件注册 myPageEl.onclick = (e) => { // console.log(e) let classNameArr = e.target.className.split(' '); if (classNameArr.indexOf('my-page-cell') !== -1) { this.clickPageFun(Number(e.target.innerText)); } }; }, // 上下页按钮触发 switchPage(e) { // 获取当前页 let page = document.querySelector(`${this.element} .my-page-checked`).innerText - 0; let classNameArr = e.target.className.split(' '); if (classNameArr.indexOf('my-page-prev') !== -1) { this.clickPageFun(page - 1); // 上一页 } else if (classNameArr.indexOf('my-page-next') !== -1) { this.clickPageFun(page + 1); // 下一页 } }, // 分页切换处理 clickPageFun(page) { page = Number(page); // 满足条件改变结构 if (this.pages > 7) { let newEl = ''; if (page <= 1) { newEl = `
  • 1
  • 2
  • ...
  • ${this.pages}
  • `; } else if (page >= 2 && page < this.pages - 1) { newEl = `
  • 1
  • ...
  • ${page}
  • ...
  • ${this.pages}
  • `; } else if (page >= this.pages - 1) { newEl = `
  • 1
  • ...
  • ${this.pages - 1}
  • ${this.pages}
  • `; } document.querySelector(`${this.element} .my-page-group`).innerHTML = newEl; } // 标注选中项 let pageCellELs = document.querySelectorAll( `${this.element} .my-page-cell` ); pageCellELs.forEach((el) => { if (el.innerText == page) { el.classList.add('my-page-checked'); } else { el.classList.remove('my-page-checked'); } }); this.forbidden(page); // 回调响应 this.callback && this.callback(page); }, // 上下页按钮启禁 forbidden(page) { let prveEl = document.querySelector(`${this.element} .my-page-prev`); let nextEl = document.querySelector(`${this.element} .my-page-next`); if (page === 1) { prveEl.classList.add('my-page-forbid'); } else { prveEl.classList.remove('my-page-forbid'); } if (page === this.pages) { nextEl.classList.add('my-page-forbid'); } else { nextEl.classList.remove('my-page-forbid'); } }, // 参数检验 intercept() { if ( !this.pages || this.pages === 0 || Math.floor(this.pages) != this.pages ) { throw 'my-page中pages必须是整数且不为0'; this.pages = Math.floor(this.pages); } if ( !this.currentPage || this.currentPage === 0 || Math.floor(this.currentPage) !== this.currentPage ) { throw 'my-page中currentPage必须是整数且不为0'; this.currentPage = Math.floor(this.currentPage); } if (document.querySelectorAll(this.element).length === 0) { throw this.element + '元素不存在'; } if (this.currentPage > this.pages) { throw '当前页不存在'; } }, };