☰

JS-分页插件

用于对数据分页显示

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

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

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