https://www.polywirer.com/_upload/tpl/04/03/1027/template1027/js/page.js

1function myPageInit({
2    pages = 10,
3    currentPage = 1,
4    element = '.my-page',
5    callback
6}) {
7
8    intercept();
9
10    const myPageEl = document.querySelector(element);
11
12    // 构造结构
13    let htmlStrArr = [];
14    for (let i = 0; i < pages; i++) {
15        htmlStrArr.push(`<li class="my-page-cell">${i + 1}</li>`);
16    };
17    if (pages > 7) {
18        htmlStrArr.splice(5, htmlStrArr.length - 6, "<li class='my-page-omit'>...</li>");
19    };
20    htmlStr = htmlStrArr.join("");
21    let pageHtmlStr = `<div class="my-page-prev">上页</div>
22        <ul class="my-page-group">${htmlStr}</ul>
23        <div class="my-page-next">下页</div>`;
24
25    // 注入结构
26    myPageEl.innerHTML = pageHtmlStr;
27
28    // 标记默认页
29    clickPageFun(currentPage);
30
31    // 上下页切换事件注册
32    let btns = document.querySelectorAll(`${element} div`);
33    btns.forEach(el => {
34        el.onclick = switchPage;
35    });
36
37    // 点击事件注册
38    myPageEl.onclick = function (e) {
39        // console.log(e)
40        let classNameArr = e.target.className.split(" ");
41        if (classNameArr.indexOf("my-page-cell") !== -1) {
42            clickPageFun(Number(e.target.innerText));
43        };
44    }
45
46    // 上下页按钮触发
47    function switchPage(e) {
48        // 获取当前页
49        let page = document.querySelector(`${element} .my-page-checked`).innerText - 0;
50
51        let classNameArr = e.target.className.split(" ");
52        if (classNameArr.indexOf("my-page-prev") !== -1) {
53            clickPageFun(page - 1); // 上一页
54        } else if (classNameArr.indexOf("my-page-next") !== -1) {
55            clickPageFun(page + 1); // 下一页
56        };
57    };
58
59
60    // 分页切换处理
61    function clickPageFun(page) {
62        page = Number(page);
63        // 满足条件改变结构
64        if (pages > 7) {
65            let newEl = '';
66            if (page <= 4) {
67                newEl = `
68                <li class="my-page-cell">1</li>
69                <li class="my-page-cell">2</li>
70                <li class="my-page-cell">3</li>
71                <li class="my-page-cell">4</li>
72                <li class="my-page-cell">5</li>
73                <li class="my-page-omit">...</li>
74                <li class="my-page-cell">${pages}</li>`;
75            } else if (page >= 5 && page < pages - 3) {
76                newEl = `
77                <li class="my-page-cell">1</li>
78                <li class="my-page-omit">...</li>
79                <li class="my-page-cell">${page - 1}</li>
80                <li class="my-page-cell">${page}</li>
81                <li class="my-page-cell">${page + 1}</li>
82                <li class="my-page-omit">...</li>
83                <li class="my-page-cell">${pages}</li>`;
84            } else if (page >= pages - 3) {
85                newEl = `
86                <li class="my-page-cell">1</li>
87                <li class="my-page-omit">...</li>
88                <li class="my-page-cell">${pages - 4}</li>
89                <li class="my-page-cell">${pages - 3}</li>
90                <li class="my-page-cell">${pages - 2}</li>
91                <li class="my-page-cell">${pages - 1}</li>
92                <li class="my-page-cell">${pages}</li>`;
93            };
94            document.querySelector(`${element} .my-page-group`).innerHTML = newEl;
95            
96        };
97
98        // 标注选中项
99        let pageCellELs = document.querySelectorAll(`${element} .my-page-cell`);
100        pageCellELs.forEach(el => {
101            if (el.innerText == page) {
102                el.classList.add('my-page-checked');
103            } else {
104                el.classList.remove('my-page-checked');
105            };
106        });
107
108        forbidden(page);
109
110        // 回调响应
111        callback && callback(page);
112    };
113
114    // 上下页按钮启禁
115    function forbidden(page) {
116        let prveEl = document.querySelector(`${element} .my-page-prev`);
117        let nextEl = document.querySelector(`${element} .my-page-next`);
118        if (page === 1) {
119            prveEl.classList.add('my-page-forbid');
120        } else {
121            prveEl.classList.remove('my-page-forbid');
122        };
123
124        if (page === pages) {
125            nextEl.classList.add('my-page-forbid');
126        } else {
127            nextEl.classList.remove('my-page-forbid');
128        };
129    };
130
131    // 参数检验
132    function intercept() {
133        if (!pages || pages === 0 || (Math.floor(pages) != pages)) {
134            throw "my-page中pages必须是整数且不为0";
135            pages = Math.floor(pages);
136        };
137
138        if (!currentPage || currentPage === 0 || (Math.floor(currentPage) !== currentPage)) {
139            throw "my-page中currentPage必须是整数且不为0";
140            currentPage = Math.floor(currentPage);
141
142        };
143
144        if (document.querySelectorAll(element).length === 0) {
145            throw element + "元素不存在";
146        };
147
148        if (currentPage > pages) {
149            throw "当前页不存在";
150        }
151    };
152}