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. })();