☰

JS-分页插件

用于对数据分页显示

当前为 2024-09-15 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/465550/1448082/JS-%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6.js 

  1. // @ts-nocheck
  2. /* 
  3.  
  4. 数据分页导航
  5. 例子
  6.  
  7. let dataPaging = new DataPaging({
  8.     data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  9.     pageCount: 3,
  10.     currentPage: 1,
  11.     pageChangeCallBack:function(page){
  12.         console.log(page);
  13.     }
  14. });
  15. dataPaging.append(document.querySelector("body > div"));
  16. */
  17. let DataPaging = {};
  18. (function () {
  19.   class Paging {
  20.     CONFIG = {
  21.       /* 数据 */
  22.       data: [],
  23.       /* 每一页显示的数据数量 */
  24.       pageCount: 5,
  25.       /* 当前能最多显示出来的页码 */
  26.       pageStep: 3,
  27.       /* 当前页码 */
  28.       currentPage: 1,
  29.       /**
  30.        * 当前页码改变的回调
  31.        * @param {number} page 当前页
  32.        */
  33.       pageChangeCallBack: function (page) {},
  34.       /* 上一页按钮 */
  35.       prevBtn: {
  36.         /* 是否启用 */
  37.         enable: true,
  38.         /* 点击事件回调 */
  39.         callBack: function () {},
  40.       },
  41.       /* 下一页按钮 */
  42.       nextBtn: {
  43.         /* 是否启用 */
  44.         enable: true,
  45.         callBack: function () {},
  46.       },
  47.       /* 第一页按钮 */
  48.       firstBtn: {
  49.         /* 是否启用 */
  50.         enable: true,
  51.         callBack: function () {},
  52.       },
  53.       /* 最后一页按钮 */
  54.       lastBtn: {
  55.         /* 是否启用 */
  56.         enable: true,
  57.         callBack: function () {},
  58.       },
  59.     };
  60.     PAGE_CONFIG = {
  61.       /**
  62.        * 获取当前所在页
  63.        * @returns {Number}
  64.        */
  65.       getCurrentPage: () => {
  66.         return this.DOM_CONFIG.getAttributeWithPageId(
  67.           this.DOM_CONFIG.getAttributeWithCurrentPage()
  68.         );
  69.       },
  70.       maxPage: 1 /* 最大页码 */,
  71.     };
  72.     DOM_CONFIG = {
  73.       /* 整个分页元素 */
  74.       dataPagingNode: {
  75.         localName: "div",
  76.         id: "whitesev-datapaging",
  77.         dom: null,
  78.       },
  79.       /* 第一页按钮 */
  80.       firstBtnNode: {
  81.         localName: "a",
  82.         className: "pg-first",
  83.         svgHTML: `<svg t="1694497357294" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4758" width="20"><path d="M730.639277 211.376748l60.943177 60.943176-301.698894 301.698893L428.940384 513.075641z" p-id="4759"></path><path d="M730.496772 814.924547l60.943176-60.943176-301.698893-301.698893L428.797879 513.225654z" p-id="4760"></path><path d="M298.666667 213.333333h85.333333v597.333334H298.666667z" p-id="4761"></path></svg>`,
  84.         get: () => {
  85.           return this.DOM_CONFIG.dataPagingNode.dom.querySelector(
  86.             `${this.DOM_CONFIG.firstBtnNode.localName}.${this.DOM_CONFIG.firstBtnNode.className}`
  87.           );
  88.         },
  89.       },
  90.       /* 上一页按钮 */
  91.       prevBtnNode: {
  92.         localName: "a",
  93.         className: "pg-prev",
  94.         svgHTML: `<svg t="1694497840770" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5272" width="20"><path d="M620.322607 151.04875l60.943176 60.943176-362.038672 362.038672L258.283935 513.087422z" p-id="5273"></path><path d="M620.180101 875.252545l60.943177-60.943176-362.038672-362.038672L258.141429 513.213873z" p-id="5274"></path></svg>`,
  95.         get: () => {
  96.           return this.DOM_CONFIG.dataPagingNode.dom.querySelector(
  97.             `${this.DOM_CONFIG.prevBtnNode.localName}.${this.DOM_CONFIG.prevBtnNode.className}`
  98.           );
  99.         },
  100.       },
  101.       /* 下一页按钮 */
  102.       nextBtnNode: {
  103.         localName: "a",
  104.         className: "pg-next",
  105.         svgHTML: `<svg t="1694497949481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5465" width="20"><path d="M403.399239 151.02258l-60.943177 60.943177 362.038672 362.038672L765.437911 513.061252z" p-id="5466"></path><path d="M403.576858 875.263008l-60.943176-60.943176 362.038672-362.038672L765.61553 513.224336z" p-id="5467"></path></svg>`,
  106.         get: () => {
  107.           return this.DOM_CONFIG.dataPagingNode.dom.querySelector(
  108.             `${this.DOM_CONFIG.nextBtnNode.localName}.${this.DOM_CONFIG.nextBtnNode.className}`
  109.           );
  110.         },
  111.       },
  112.       /* 最后一页按钮 */
  113.       lastBtnNode: {
  114.         localName: "a",
  115.         className: "pg-last",
  116.         svgHTML: `<svg t="1694498035538" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2299" width="20"><path d="M516.266667 490.666667L256 230.4 315.733333 170.666667l320 320L315.733333 810.666667 256 750.933333l260.266667-260.266666zM678.4 170.666667h85.333333v640h-85.333333V170.666667z" p-id="2300"></path></svg>`,
  117.         get: () => {
  118.           return this.DOM_CONFIG.dataPagingNode.dom.querySelector(
  119.             `${this.DOM_CONFIG.lastBtnNode.localName}.${this.DOM_CONFIG.lastBtnNode.className}`
  120.           );
  121.         },
  122.       },
  123.       /**
  124.        * 设置 元素的 页码 值
  125.        * @param {HTMLElement} node
  126.        */
  127.       setAttributeWithPageId: (node, page) => {
  128.         node.setAttribute("page-id", page);
  129.       },
  130.       /**
  131.        * 获取 元素 的页码属性
  132.        * @param {HTMLElement} node
  133.        * @returns {Number|null}
  134.        */
  135.       getAttributeWithPageId: (node) => {
  136.         return node?.getAttribute("page-id")
  137.           ? parseInt(node.getAttribute("page-id"))
  138.           : null;
  139.       },
  140.       /**
  141.        * 判断 元素 是否存在页码属性
  142.        * @param {HTMLElement} node
  143.        * @returns {Boolean}
  144.        */
  145.       hasAttributeWithPageId: (node) => {
  146.         return node.hasAttribute("page-id");
  147.       },
  148.       /**
  149.        * 设置 元素的属性 为当前所在页码
  150.        * @param {HTMLElement} node
  151.        */
  152.       setAttributeWithCurrentPage: (node) => {
  153.         node.setAttribute("data-current-page", "");
  154.       },
  155.       /**
  156.        * 获取当前页码的元素
  157.        * @param {HTMLElement?} dataPagingNode
  158.        * @returns {HTMLElement|null}
  159.        */
  160.       getAttributeWithCurrentPage: (dataPagingNode) => {
  161.         return (
  162.           dataPagingNode || this.DOM_CONFIG.dataPagingNode.dom
  163.         ).querySelector("a[data-current-page]");
  164.       },
  165.       /**
  166.        * 判断 元素 是否存在 当前页的属性
  167.        * @param {HTMLElement} node
  168.        * @returns
  169.        */
  170.       hasAttributeWithCurrentPage: (node) => {
  171.         return node.hasAttribute("data-current-page");
  172.       },
  173.       /**
  174.        * 移除 当前页码的属性
  175.        * @param {HTMLElement} node
  176.        */
  177.       removeAttributeWithCurrentPage: (node) => {
  178.         node.removeAttribute("data-current-page");
  179.       },
  180.       /**
  181.        * 设置 元素 禁用
  182.        * @param {HTMLElement} node
  183.        */
  184.       setAttributeWithDisabled: (node) => {
  185.         node.setAttribute("disabled", true);
  186.       },
  187.       /**
  188.        * 移除当前页面的禁用的元素
  189.        * @param {HTMLElement|null} dataPagingNode
  190.        */
  191.       removeAllAttributeWithDisabled: (dataPagingNode) => {
  192.         (dataPagingNode || this.DOM_CONFIG.dataPagingNode.dom)
  193.           .querySelectorAll("a[class][disabled]")
  194.           .forEach((item) => {
  195.             item.removeAttribute("disabled");
  196.           });
  197.       },
  198.       /**
  199.        * 获取 第一页 元素节点
  200.        * @param {HTMLElement?} dataPagingNode
  201.        * @returns {HTMLElement|null}
  202.        */
  203.       getFirstPageNode: (dataPagingNode) => {
  204.         return (
  205.           dataPagingNode || this.DOM_CONFIG.dataPagingNode.dom
  206.         ).querySelector("a[page-id='1']");
  207.       },
  208.       /**
  209.        * 获取 最后一页 元素节点
  210.        * @param {HTMLElement?} dataPagingNode
  211.        * @returns {HTMLElement|null}
  212.        */
  213.       getLastPageNode: (dataPagingNode) => {
  214.         return (
  215.           dataPagingNode || this.DOM_CONFIG.dataPagingNode.dom
  216.         ).querySelector(`a[page-id='${this.PAGE_CONFIG.maxPage}']`);
  217.       },
  218.       /**
  219.        * 获取当前所有的页码元素节点
  220.        * @param {HTMLElement?} dataPagingNode
  221.        * @returns {NodeList}
  222.        */
  223.       getAllPageNode: (dataPagingNode) => {
  224.         return (
  225.           dataPagingNode || this.DOM_CONFIG.dataPagingNode.dom
  226.         ).querySelectorAll("a[page-id]");
  227.       },
  228.     };
  229.     constructor(details) {
  230.       this.changeConfig(details);
  231.     }
  232.     /**
  233.      * 添加CSS
  234.      */
  235.     addCSS(target = document.head) {
  236.       let cssNode = document.createElement("style");
  237.       cssNode.setAttribute("type", "text/css");
  238.       cssNode.innerHTML = `@charset "utf-8";
  239.       #${this.DOM_CONFIG.dataPagingNode.id} {
  240.         text-align: center;
  241.         display: inline-block;
  242.       }
  243.       #${this.DOM_CONFIG.dataPagingNode.id} .${this.DOM_CONFIG.firstBtnNode.className},
  244.       #${this.DOM_CONFIG.dataPagingNode.id} .${this.DOM_CONFIG.prevBtnNode.className},
  245.       #${this.DOM_CONFIG.dataPagingNode.id} .${this.DOM_CONFIG.nextBtnNode.className},
  246.       #${this.DOM_CONFIG.dataPagingNode.id} .${this.DOM_CONFIG.lastBtnNode.className} {
  247.         font-family: Arial, sans-serif;
  248.         color: #333;
  249.         font-size: 22px;
  250.         fill: currentColor;
  251.         display: inline-flex;
  252.         justify-content: center;
  253.         align-items: center;
  254.         text-decoration: none;
  255.       }
  256.       #${this.DOM_CONFIG.dataPagingNode.id} a,
  257.       #${this.DOM_CONFIG.dataPagingNode.id} span {
  258.         width: 45px;
  259.         height: 40px;
  260.         border: 1px solid #ebebeb;
  261.         margin-left: -1px;
  262.         color: #000000;
  263.         line-height: 40px;
  264.         float: left;
  265.         font-size: 15px;
  266.         text-decoration: none;
  267.         margin: 0 2px;
  268.         border-radius: 6px;
  269.       }
  270.       #${this.DOM_CONFIG.dataPagingNode.id} a:hover,
  271.       #${this.DOM_CONFIG.dataPagingNode.id} span:hover {
  272.         border-color: #3897cd;
  273.         color: #3897cd;
  274.         position: relative;
  275.         z-index: 1;
  276.       }
  277.       #${this.DOM_CONFIG.dataPagingNode.id} a {
  278.         cursor: pointer;
  279.         user-select: none;
  280.       }
  281.       #${this.DOM_CONFIG.dataPagingNode.id} a[data-current-page] {
  282.         background-color: #222a35;
  283.         color: #fff;
  284.         border-color: #ebebeb;
  285.         position: relative;
  286.         z-index: 1;
  287.       }
  288.       #${this.DOM_CONFIG.dataPagingNode.id} a.${this.DOM_CONFIG.firstBtnNode.className}[disabled="true"],
  289.       #${this.DOM_CONFIG.dataPagingNode.id} a.${this.DOM_CONFIG.prevBtnNode.className}[disabled="true"],
  290.       #${this.DOM_CONFIG.dataPagingNode.id} a.${this.DOM_CONFIG.nextBtnNode.className}[disabled="true"],
  291.       #${this.DOM_CONFIG.dataPagingNode.id} a.${this.DOM_CONFIG.lastBtnNode.className}[disabled="true"]{
  292.         cursor: not-allowed;
  293.         border: 1px solid transparent;
  294.         color: #8a8a8a;
  295.       }
  296.       `;
  297.       target.appendChild(cssNode);
  298.     }
  299.     /**
  300.      * 获取分页元素
  301.      * @returns {Element}
  302.      */
  303.     getDataPagingNode() {
  304.       let that = this;
  305.       let dataPagingNode = document.createElement(
  306.         that.DOM_CONFIG.dataPagingNode.localName
  307.       );
  308.       that.DOM_CONFIG.dataPagingNode.dom = dataPagingNode;
  309.       dataPagingNode.id = that.DOM_CONFIG.dataPagingNode.id;
  310.       /* 第一页 */
  311.       let firstBtnNode = document.createElement(
  312.         that.DOM_CONFIG.firstBtnNode.localName
  313.       );
  314.       firstBtnNode.innerHTML = that.DOM_CONFIG.firstBtnNode.svgHTML;
  315.       /* 上一页 */
  316.       let prevBtnNode = document.createElement(
  317.         that.DOM_CONFIG.prevBtnNode.localName
  318.       );
  319.       prevBtnNode.innerHTML = that.DOM_CONFIG.prevBtnNode.svgHTML;
  320.       /* 下一页 */
  321.       let nextBtnNode = document.createElement(
  322.         that.DOM_CONFIG.nextBtnNode.localName
  323.       );
  324.       nextBtnNode.innerHTML = that.DOM_CONFIG.nextBtnNode.svgHTML;
  325.       /* 最后一页 */
  326.       let lastBtnNode = document.createElement(
  327.         that.DOM_CONFIG.lastBtnNode.localName
  328.       );
  329.       lastBtnNode.innerHTML = that.DOM_CONFIG.lastBtnNode.svgHTML;
  330.       firstBtnNode.className = that.DOM_CONFIG.firstBtnNode.className;
  331.       prevBtnNode.className = that.DOM_CONFIG.prevBtnNode.className;
  332.       nextBtnNode.className = that.DOM_CONFIG.nextBtnNode.className;
  333.       lastBtnNode.className = that.DOM_CONFIG.lastBtnNode.className;
  334.       /* 计算总数据量除以显示的数据量 得出分页的数量 */
  335.       that.PAGE_CONFIG.maxPage = Math.ceil(
  336.         that.CONFIG.data.length / that.CONFIG.pageCount
  337.       );
  338.       /* 校正超出或小于的当前页码 */
  339.       if (that.CONFIG.currentPage < 1) {
  340.         that.CONFIG.currentPage = 1;
  341.       } else if (that.CONFIG.currentPage > that.PAGE_CONFIG.maxPage) {
  342.         that.CONFIG.currentPage = that.PAGE_CONFIG.maxPage;
  343.       }
  344.       /* 超过1 才开启分页 */
  345.       if (that.PAGE_CONFIG.maxPage < 2) {
  346.         return dataPagingNode;
  347.       }
  348.       /* 判断第一页按钮 是否开启 */
  349.       if (that.CONFIG.firstBtn.enable) {
  350.         this.setFirstBtnClickEvent(firstBtnNode, dataPagingNode);
  351.         dataPagingNode.appendChild(firstBtnNode);
  352.       }
  353.       /* 判断上一页按钮 是否开启 */
  354.       if (that.CONFIG.prevBtn.enable) {
  355.         this.setPrevBtnClickEvent(prevBtnNode, dataPagingNode);
  356.         dataPagingNode.appendChild(prevBtnNode);
  357.       }
  358.       let currentPage = that.CONFIG.currentPage;
  359.       /* 计算出的最大页码在限制的显示页码数量内 */
  360.       /* 比如计算出的页码总共有5个，设置中当前能显示出的页码按钮元素为3个 */
  361.       if (that.CONFIG.pageStep > that.PAGE_CONFIG.maxPage) {
  362.         for (
  363.           let _currentPage = currentPage;
  364.           _currentPage <= that.PAGE_CONFIG.maxPage;
  365.           _currentPage++
  366.         ) {
  367.           let pageBtnNode = document.createElement("a");
  368.           that.DOM_CONFIG.setAttributeWithPageId(pageBtnNode, _currentPage);
  369.           pageBtnNode.innerText = _currentPage;
  370.           if (that.CONFIG.currentPage === _currentPage) {
  371.             that.DOM_CONFIG.setAttributeWithCurrentPage(pageBtnNode);
  372.           }
  373.           this.setPageBtnClickEvent(pageBtnNode, dataPagingNode);
  374.           dataPagingNode.appendChild(pageBtnNode);
  375.         }
  376.       } else {
  377.         /* 如果 当前页 + 限制显示的页码 大于等于 最大页，那么 从最后一页倒序着添加 */
  378.         if (currentPage + that.CONFIG.pageStep > that.PAGE_CONFIG.maxPage) {
  379.           currentPage = that.PAGE_CONFIG.maxPage;
  380.           let needAppendNodeList = [];
  381.           for (let index = 0; index < that.CONFIG.pageStep; index++) {
  382.             let pageBtnNode = document.createElement("a");
  383.             that.DOM_CONFIG.setAttributeWithPageId(pageBtnNode, currentPage);
  384.             pageBtnNode.innerText = currentPage;
  385.             if (that.CONFIG.currentPage === currentPage) {
  386.               that.DOM_CONFIG.setAttributeWithCurrentPage(pageBtnNode);
  387.             }
  388.             this.setPageBtnClickEvent(pageBtnNode, dataPagingNode);
  389.             needAppendNodeList = [...needAppendNodeList, pageBtnNode];
  390.             currentPage--;
  391.           }
  392.           needAppendNodeList.reverse();
  393.           needAppendNodeList.forEach((item) => {
  394.             dataPagingNode.appendChild(item);
  395.           });
  396.         } else {
  397.           /* 当前页 在计算出的页码内 */
  398.           for (let index = 0; index < that.CONFIG.pageStep; index++) {
  399.             let pageBtnNode = document.createElement("a");
  400.             that.DOM_CONFIG.setAttributeWithPageId(pageBtnNode, currentPage);
  401.             pageBtnNode.innerText = currentPage;
  402.             if (that.CONFIG.currentPage === currentPage) {
  403.               that.DOM_CONFIG.setAttributeWithCurrentPage(pageBtnNode);
  404.             }
  405.             this.setPageBtnClickEvent(pageBtnNode, dataPagingNode);
  406.             dataPagingNode.appendChild(pageBtnNode);
  407.             currentPage++;
  408.           }
  409.         }
  410.       }
  411.       /* 判断下一页按钮 是否开启 */
  412.       if (that.CONFIG.nextBtn.enable) {
  413.         this.setNextBtnClickEvent(nextBtnNode, dataPagingNode);
  414.         dataPagingNode.appendChild(nextBtnNode);
  415.       }
  416.       /* 判断最后一页按钮 是否开启 */
  417.       if (that.CONFIG.lastBtn.enable) {
  418.         this.setLastBtnClickEvent(lastBtnNode, dataPagingNode);
  419.         dataPagingNode.appendChild(lastBtnNode);
  420.       }
  421.       /* 配置中的当前页码为1时 设置 第一页、上一页按钮禁用 */
  422.       if (that.CONFIG.currentPage === 1) {
  423.         that.DOM_CONFIG.setAttributeWithDisabled(
  424.           that.DOM_CONFIG.firstBtnNode.get()
  425.         );
  426.         that.DOM_CONFIG.setAttributeWithDisabled(
  427.           that.DOM_CONFIG.prevBtnNode.get()
  428.         );
  429.       } else if (that.CONFIG.currentPage === that.PAGE_CONFIG.maxPage) {
  430.         /* 如果为最大的页码 下一页、最后一页禁用 */
  431.         that.DOM_CONFIG.setAttributeWithDisabled(
  432.           that.DOM_CONFIG.nextBtnNode.get()
  433.         );
  434.         that.DOM_CONFIG.setAttributeWithDisabled(
  435.           that.DOM_CONFIG.lastBtnNode.get()
  436.         );
  437.       }
  438.       return dataPagingNode;
  439.     }
  440.     /**
  441.      * 设置 第一页 点击事件
  442.      * @param {HTMLElement} btnNode 元素
  443.      * @param {HTMLElement} dataPagingNode 分页元素(主)
  444.      */
  445.     setFirstBtnClickEvent(btnNode, dataPagingNode) {
  446.       let that = this;
  447.       btnNode.onclick = function () {
  448.         let currentNode = that.DOM_CONFIG.getAttributeWithCurrentPage();
  449.         /* 当前页为第一页时无效 */
  450.         if (that.DOM_CONFIG.getAttributeWithPageId(currentNode) === 1) {
  451.           return;
  452.         }
  453.         that.CONFIG.firstBtn.callBack();
  454.         let allPageNode = that.DOM_CONFIG.getAllPageNode(dataPagingNode);
  455.         for (let i = 0; i < that.CONFIG.pageStep; i++) {
  456.           let item = allPageNode[i];
  457.           /* 设置当前页码为第一页 */
  458.           if (i === 0) {
  459.             that.DOM_CONFIG.setAttributeWithCurrentPage(item);
  460.           } else {
  461.             /* 移除其它设置的第一页 */
  462.             that.DOM_CONFIG.removeAttributeWithCurrentPage(item);
  463.           }
  464.           that.DOM_CONFIG.setAttributeWithPageId(item, i + 1);
  465.           item.innerText = i + 1;
  466.         }
  467.         that.DOM_CONFIG.removeAllAttributeWithDisabled(dataPagingNode);
  468.         /* 可视区域存在第一页的页码时，禁用第一页、上一页按钮 */
  469.         if (that.DOM_CONFIG.getFirstPageNode(dataPagingNode)) {
  470.           that.DOM_CONFIG.setAttributeWithDisabled(
  471.             that.DOM_CONFIG.firstBtnNode.get()
  472.           );
  473.           that.DOM_CONFIG.setAttributeWithDisabled(
  474.             that.DOM_CONFIG.prevBtnNode.get()
  475.           );
  476.         }
  477.         that.CONFIG.pageChangeCallBack(1);
  478.       };
  479.     }
  480.     /**
  481.      * 设置 上一页 点击事件
  482.      * @param {HTMLElement} btnNode 元素
  483.      * @param {HTMLElement} dataPagingNode 分页元素(主)
  484.      */
  485.     setPrevBtnClickEvent(btnNode, dataPagingNode) {
  486.       let that = this;
  487.       btnNode.onclick = function () {
  488.         let currentNode = that.DOM_CONFIG.getAttributeWithCurrentPage();
  489.         /* 当前页为第一页时无效 */
  490.         if (that.DOM_CONFIG.getAttributeWithPageId(currentNode) === 1) {
  491.           return;
  492.         }
  493.         that.CONFIG.prevBtn.callBack();
  494.         if (
  495.           that.DOM_CONFIG.hasAttributeWithPageId(
  496.             currentNode.previousElementSibling
  497.           )
  498.         ) {
  499.           currentNode.previousElementSibling.click();
  500.         } else {
  501.           let allPageNode = that.DOM_CONFIG.getAllPageNode(dataPagingNode);
  502.           allPageNode.forEach((item, index) => {
  503.             let page = that.DOM_CONFIG.getAttributeWithPageId(item);
  504.             page--;
  505.             that.DOM_CONFIG.setAttributeWithPageId(item, page);
  506.             item.innerText = page;
  507.           });
  508.           that.CONFIG.pageChangeCallBack(that.PAGE_CONFIG.getCurrentPage());
  509.         }
  510.         that.DOM_CONFIG.removeAllAttributeWithDisabled(dataPagingNode);
  511.         /* 如果当前第1页可见，且当前所在页不是第1页，则禁用上一页按钮和第一页按钮 */
  512.         if (
  513.           that.DOM_CONFIG.getFirstPageNode(dataPagingNode) &&
  514.           that.PAGE_CONFIG.getCurrentPage() == 1
  515.         ) {
  516.           that.DOM_CONFIG.setAttributeWithDisabled(
  517.             that.DOM_CONFIG.firstBtnNode.get()
  518.           );
  519.           that.DOM_CONFIG.setAttributeWithDisabled(
  520.             that.DOM_CONFIG.prevBtnNode.get()
  521.           );
  522.         }
  523.       };
  524.     }
  525.     /**
  526.      * 设置 下一页 点击事件
  527.      * @param {HTMLElement} btnNode 元素
  528.      * @param {HTMLElement} dataPagingNode 分页元素(主)
  529.      */
  530.     setNextBtnClickEvent(btnNode, dataPagingNode) {
  531.       let that = this;
  532.       btnNode.onclick = function () {
  533.         let currentNode = that.DOM_CONFIG.getAttributeWithCurrentPage();
  534.         /* 当前页出于最后一页时 无效点击 */
  535.         if (
  536.           that.DOM_CONFIG.getAttributeWithPageId(currentNode) ===
  537.           that.PAGE_CONFIG.maxPage
  538.         ) {
  539.           return;
  540.         }
  541.         that.CONFIG.nextBtn.callBack();
  542.         /* 如果后面的按钮存在页码属性 点击 */
  543.         if (
  544.           that.DOM_CONFIG.hasAttributeWithPageId(currentNode.nextElementSibling)
  545.         ) {
  546.           currentNode.nextElementSibling.click();
  547.         } else {
  548.           let allPageNode = that.DOM_CONFIG.getAllPageNode(dataPagingNode);
  549.           allPageNode.forEach((item, index) => {
  550.             let page = that.DOM_CONFIG.getAttributeWithPageId(item);
  551.             page++;
  552.             if (page > that.PAGE_CONFIG.maxPage) {
  553.               return;
  554.             }
  555.             that.DOM_CONFIG.setAttributeWithPageId(item, page);
  556.             item.innerText = page;
  557.           });
  558.           that.CONFIG.pageChangeCallBack(that.PAGE_CONFIG.getCurrentPage());
  559.         }
  560.         that.DOM_CONFIG.removeAllAttributeWithDisabled(dataPagingNode);
  561.         if (
  562.           that.DOM_CONFIG.getLastPageNode() &&
  563.           that.PAGE_CONFIG.getCurrentPage() == that.PAGE_CONFIG.maxPage
  564.         ) {
  565.           that.DOM_CONFIG.setAttributeWithDisabled(
  566.             that.DOM_CONFIG.nextBtnNode.get()
  567.           );
  568.           that.DOM_CONFIG.setAttributeWithDisabled(
  569.             that.DOM_CONFIG.lastBtnNode.get()
  570.           );
  571.         }
  572.       };
  573.     }
  574.     /**
  575.      * 设置 最后一页 点击事件
  576.      * @param {HTMLElement} btnNode 元素
  577.      * @param {HTMLElement} dataPagingNode 分页元素(主)
  578.      */
  579.     setLastBtnClickEvent(btnNode, dataPagingNode) {
  580.       let that = this;
  581.       btnNode.onclick = function () {
  582.         let currentNode = that.DOM_CONFIG.getAttributeWithCurrentPage();
  583.         if (
  584.           that.DOM_CONFIG.getAttributeWithPageId(currentNode) ===
  585.           that.PAGE_CONFIG.maxPage
  586.         ) {
  587.           return;
  588.         }
  589.         that.CONFIG.lastBtn.callBack();
  590.         let allPageNode = Array.from(
  591.           that.DOM_CONFIG.getAllPageNode(dataPagingNode)
  592.         );
  593.         allPageNode.reverse();
  594.         let pageCount = that.PAGE_CONFIG.maxPage;
  595.         let index = 0;
  596.         while (true) {
  597.           if (that.PAGE_CONFIG.maxPage - pageCount > 3) {
  598.             break;
  599.           }
  600.           let item = allPageNode[index];
  601.           if (item == null) {
  602.             break;
  603.           }
  604.           if (index === 0) {
  605.             that.DOM_CONFIG.setAttributeWithCurrentPage(item);
  606.           } else {
  607.             that.DOM_CONFIG.removeAttributeWithCurrentPage(item);
  608.           }
  609.  
  610.           that.DOM_CONFIG.setAttributeWithPageId(item, pageCount);
  611.           item.innerText = pageCount;
  612.           pageCount--;
  613.           index++;
  614.         }
  615.         that.DOM_CONFIG.removeAllAttributeWithDisabled(dataPagingNode);
  616.         that.DOM_CONFIG.setAttributeWithDisabled(
  617.           that.DOM_CONFIG.nextBtnNode.get()
  618.         );
  619.         that.DOM_CONFIG.setAttributeWithDisabled(
  620.           that.DOM_CONFIG.lastBtnNode.get()
  621.         );
  622.         that.CONFIG.pageChangeCallBack(that.PAGE_CONFIG.maxPage);
  623.       };
  624.     }
  625.     /**
  626.      * 设置 页 点击事件
  627.      * @param {HTMLElement} btnNode 元素
  628.      * @param {HTMLElement} dataPagingNode 分页元素(主)
  629.      * @this {Paging}
  630.      */
  631.     setPageBtnClickEvent(btnNode, dataPagingNode) {
  632.       let that = this;
  633.       btnNode.onclick = function (event) {
  634.         let eventBtnNode = event.target;
  635.         that.DOM_CONFIG.getAllPageNode(dataPagingNode).forEach((item) => {
  636.           /* 是当前点击的页码 */
  637.           if (item == eventBtnNode) {
  638.             /* 如果 当前点击的页码不是current */
  639.             if (!that.DOM_CONFIG.hasAttributeWithCurrentPage(eventBtnNode)) {
  640.               that.DOM_CONFIG.setAttributeWithCurrentPage(eventBtnNode);
  641.               that.CONFIG.pageChangeCallBack(that.PAGE_CONFIG.getCurrentPage());
  642.             }
  643.           } else {
  644.             that.DOM_CONFIG.removeAttributeWithCurrentPage(item);
  645.           }
  646.         });
  647.         that.DOM_CONFIG.removeAllAttributeWithDisabled(dataPagingNode);
  648.         /* 如果当前第1页可见，且当前所在页不是第1页，则禁用上一页按钮和第一页按钮 */
  649.         if (
  650.           that.DOM_CONFIG.getFirstPageNode(dataPagingNode) &&
  651.           that.PAGE_CONFIG.getCurrentPage() == 1
  652.         ) {
  653.           that.DOM_CONFIG.setAttributeWithDisabled(
  654.             that.DOM_CONFIG.firstBtnNode.get()
  655.           );
  656.           that.DOM_CONFIG.setAttributeWithDisabled(
  657.             that.DOM_CONFIG.prevBtnNode.get()
  658.           );
  659.         }
  660.         /* 如果当前最后一页可见，且当前所在页不是最后一页，则禁用下一页按钮和最后一页按钮 */
  661.         if (
  662.           that.DOM_CONFIG.getLastPageNode() &&
  663.           that.PAGE_CONFIG.getCurrentPage() == that.PAGE_CONFIG.maxPage
  664.         ) {
  665.           that.DOM_CONFIG.setAttributeWithDisabled(
  666.             that.DOM_CONFIG.nextBtnNode.get()
  667.           );
  668.           that.DOM_CONFIG.setAttributeWithDisabled(
  669.             that.DOM_CONFIG.lastBtnNode.get()
  670.           );
  671.         }
  672.       };
  673.     }
  674.     /**
  675.      * 把分页添加到某个父元素下
  676.      * @param {HTMLElement} parentNode
  677.      */
  678.     append(parentNode) {
  679.       let that = this;
  680.       that.DOM_CONFIG.dataPagingNode.dom?.remove();
  681.       that.DOM_CONFIG.dataPagingNode.dom = null;
  682.       parentNode.appendChild(that.getDataPagingNode());
  683.     }
  684.  
  685.     /**
  686.      * 动态修改配置，注意，修改后需要.append修改原来的元素
  687.      * @param {Object} details 配置
  688.      */
  689.     changeConfig(details) {
  690.       Object.assign(this.CONFIG, details);
  691.     }
  692.  
  693.     /**
  694.      * 刷新页面
  695.      * 当总页数5页，当前在第3页，把第3页的数据删完，后面2页的数据会自动往前，需要重新计算数据
  696.      * 且重新计算的数据的页数大于当前页（第3页）时，当前页不变，若小于当前页（第3页），则当前页为计算好的最大页
  697.      * @param {[...any]} data 新的数据
  698.      */
  699.     refresh(data) {
  700.       if (data.length === this.CONFIG.data.length) {
  701.         return;
  702.       }
  703.       this.CONFIG.data = [];
  704.       this.CONFIG.data = data;
  705.       let currentPage = this.PAGE_CONFIG.getCurrentPage();
  706.       let maxPage = Math.ceil(data.length / this.CONFIG.pageCount);
  707.       if (currentPage > maxPage) {
  708.         currentPage = maxPage;
  709.       }
  710.       this.CONFIG.currentPage = currentPage;
  711.       let parentElement = this.DOM_CONFIG.dataPagingNode.dom.parentElement;
  712.       this.append(parentElement);
  713.     }
  714.   }
  715.   DataPaging = Paging;
  716. })();