https://lingyuzhao.top/js/page_number_div.js

1/*
2调用示例
3    // 设置一页中的数据量
4    let pageCount = 16;
5    // 初始化第一个页面
6    getAllTrendsByLimit(0, pageCount);
7    // 引入页码 在这里设置最大页数
8    makePage(document.getElementsByClassName("page_div_last")[0], 25)
9    // 初始化页码
10    initPage((now, _) => {
11        clearChildren(container_table);
12        const newVar = now === 1 ? 0 : (now - 1) * pageCount;
13        getAllTrendsByLimit(newVar, pageCount);
14    })
15* */
16
17// 页码控制器脚本
18
19let maxPage_save = 1;
20
21/**
22 * 初始化页码器
23 * @param e 页码管理器容器
24 * @param maxPage 最大的页码数值
25 */
26function makePage(e, maxPage) {
27    maxPage_save = maxPage;
28    e.innerHTML =
29        "    <div class='page_number_div'>\n" +
30        "        <button class='back_page'>上一页</button>\n" +
31        "        <label>\n" +
32        "            <input type='number' value='1' class='page_now' title='当前页的页码'> /\n" +
33        "        </label>\n" +
34        "        <span class='page_all'>" + maxPage_save + "</span>\n" +
35        "        <button class='next_page'>下一页</button>\n" +
36        "    </div>";
37}
38
39/**
40 * 初始化页码函数
41 * @param pageFun (nowPage, maxPage) => void  页码更换时候的自定义函数处理器
42 */
43function initPage(pageFun = undefined) {
44    // 为 当前页输入框设置事件
45    const page_now = document.getElementsByClassName("page_now");
46    if (pageFun !== undefined) {
47        for (let i = 0; i < page_now.length; i++) {
48            page_now[i].addEventListener("change", () => {
49                const value = page_now[i].value;
50                if (value <= 0) {
51                    page_now[i].value = 1;
52                    return
53                } else if (value > 25) {
54                    page_now[i].value = 25;
55                    return
56                }
57                pageFun(parseInt(value), maxPage_save)
58            })
59        }
60    }
61    // 为页码切换按钮设置事件
62    const back_page = document.getElementsByClassName("back_page");
63    const next_page = document.getElementsByClassName("next_page");
64    for (let i = 0; i < back_page.length; i++) {
65        back_page[i].onclick = () => {
66            const number = parseInt(page_now[0].value);
67            if (number === 1) {
68                return;
69            }
70            for (let i = 0; i < page_now.length; i++) {
71                page_now[i].value = number - 1;
72            }
73            if (pageFun !== undefined) {
74                pageFun(number - 1, maxPage_save);
75            }
76        }
77    }
78
79    for (let i = 0; i < next_page.length; i++) {
80        next_page[i].onclick = () => {
81            const number = parseInt(page_now[0].value);
82            if (number === maxPage_save) {
83                return;
84            }
85            for (let i = 0; i < page_now.length; i++) {
86                page_now[i].value = number + 1;
87            }
88            if (pageFun !== undefined) {
89                pageFun(number + 1, maxPage_save);
90            }
91        }
92    }
93}