function mypageinit({
pages = 10,
currentpage = 1,
element = '.my-page',
callback
}) {
intercept();
const mypageel = document.queryselector(element);
// 构造结构
let htmlstrarr = [];
for (let i = 0; i < pages; i++) {
htmlstrarr.push(`
${i + 1}`);
};
if (pages > 7) {
htmlstrarr.splice(5, htmlstrarr.length - 6, "...");
};
htmlstr = htmlstrarr.join("");
let pagehtmlstr = `上一页
下一页
`;
// 注入结构
mypageel.innerhtml = pagehtmlstr;
// 标记默认页
clickpagefun(currentpage);
// 上下页切换事件注册
let btns = document.queryselectorall(`${element} div`);
btns.foreach(el => {
el.onclick = switchpage;
});
// 点击事件注册
mypageel.onclick = function (e) {
// console.log(e)
let classnamearr = e.target.classname.split(" ");
if (classnamearr.indexof("my-page-cell") !== -1) {
clickpagefun(number(e.target.innertext));
};
}
// 上下页按钮触发
function switchpage(e) {
// 获取当前页
let page = document.queryselector(`${element} .my-page-checked`).innertext - 0;
let classnamearr = e.target.classname.split(" ");
if (classnamearr.indexof("my-page-prev") !== -1) {
clickpagefun(page - 1); // 上一页
} else if (classnamearr.indexof("my-page-next") !== -1) {
clickpagefun(page + 1); // 下一页
};
};
// 分页切换处理
function clickpagefun(page) {
page = number(page);
// 满足条件改变结构
if (pages > 7) {
let newel = '';
if (page <= 4) {
newel = `
1
2
3
4
5
...
${pages}`;
} else if (page >= 5 && page < pages - 3) {
newel = `
1
...
${page - 1}
${page}
${page + 1}
...
${pages}`;
} else if (page >= pages - 3) {
newel = `
1
...
${pages - 4}
${pages - 3}
${pages - 2}
${pages - 1}
${pages}`;
};
document.queryselector(`${element} .my-page-group`).innerhtml = newel;
};
// 标注选中项
let pagecellels = document.queryselectorall(`${element} .my-page-cell`);
pagecellels.foreach(el => {
if (el.innertext == page) {
el.classlist.add('my-page-checked');
} else {
el.classlist.remove('my-page-checked');
};
});
forbidden(page);
// 回调响应
callback && callback(page);
};
// 上下页按钮启禁
function forbidden(page) {
let prveel = document.queryselector(`${element} .my-page-prev`);
let nextel = document.queryselector(`${element} .my-page-next`);
if (page === 1) {
prveel.classlist.add('my-page-forbid');
} else {
prveel.classlist.remove('my-page-forbid');
};
if (page === pages) {
nextel.classlist.add('my-page-forbid');
} else {
nextel.classlist.remove('my-page-forbid');
};
};
// 参数检验
function intercept() {
if (!pages || pages === 0 || (math.floor(pages) != pages)) {
throw "my-page中pages必须是整数且不为0";
pages = math.floor(pages);
};
if (!currentpage || currentpage === 0 || (math.floor(currentpage) !== currentpage)) {
throw "my-page中currentpage必须是整数且不为0";
currentpage = math.floor(currentpage);
};
if (document.queryselectorall(element).length === 0) {
throw element + "元素不存在";
};
if (currentpage > pages) {
throw "当前页不存在";
}
};
}