/**
|
* 分页插件
|
* 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(`<li class="my-page-cell">${i + 1}</li>`);
|
}
|
if (this.pages > 7) {
|
htmlStrArr.splice(
|
2,
|
htmlStrArr.length - 6,
|
"<li class='my-page-omit'>...</li>"
|
);
|
}
|
htmlStr = htmlStrArr.join('');
|
let pageHtmlStr = `<div class="my-page-prev"><</div>
|
<ul class="my-page-group">${htmlStr}</ul>
|
<div class="my-page-next">></div>`;
|
|
// 注入结构
|
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 = `
|
<li class="my-page-cell">1</li>
|
<li class="my-page-cell">2</li>
|
<li class="my-page-omit">...</li>
|
<li class="my-page-cell">${this.pages}</li>`;
|
} else if (page >= 2 && page < this.pages - 1) {
|
newEl = `
|
<li class="my-page-cell">1</li>
|
<li class="my-page-omit">...</li>
|
<li class="my-page-cell">${page}</li>
|
<li class="my-page-omit">...</li>
|
<li class="my-page-cell">${this.pages}</li>`;
|
} else if (page >= this.pages - 1) {
|
newEl = `
|
<li class="my-page-cell">1</li>
|
<li class="my-page-omit">...</li>
|
<li class="my-page-cell">${this.pages - 1}</li>
|
<li class="my-page-cell">${this.pages}</li>`;
|
}
|
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 '当前页不存在';
|
}
|
},
|
};
|
