☰

JS-分页插件

用于对数据分页显示

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

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