通用前端分页插件

devtools/2024/9/24 10:58:11/
/*** >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*                分页组件* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/let pagehelper = {/*** 跳转到哪一页*/goto_page: function (page) {let pmax = parseInt($("#pmax").val())if (page < 1 || page > pmax) {layer.msg('无效页码');// alert('页码超出范围');return;}$("#p").val(page)console.log('跳转到第' + page + '页');// 更新按钮pagehelper.updateButtons();cms.reload();},/*** 点击上一页*/goto_previous: function () {let p = parseInt($("#p").val())if (p > 1) {pagehelper.goto_page(p - 1);}},/*** 点击下一页*/goto_next: function () {let p = parseInt($("#p").val())let pmax = parseInt($("#pmax").val())if (p < pmax) {pagehelper.goto_page(p + 1);}},/*** 生成五个页码*/generatePageNumbers: function (currentPage, totalPages) {// 计算要显示的页码范围let minPage = Math.max(1, currentPage - 2); // 至少从1开始let maxPage = Math.min(totalPages, currentPage + 2); // 最多到总页数// 如果总页数小于等于5,直接显示全部页码// if (totalPages <= 5) {//     minPage = 1;//     maxPage = totalPages;// }// 如果总页数允许且当前页接近两端,则调整最小或最大页码以包含足够的页码// 特别是当当前页是前几页或后几页时if (currentPage <= 3 && totalPages > 5) {maxPage = Math.min(totalPages, 5); // 确保不超过总页数} else if (currentPage >= totalPages - 2 && totalPages > 5) {minPage = Math.max(1, totalPages - 4); // 确保不小于1}// 生成页码数组let pageNumbers = [];for (let i = minPage; i <= maxPage; i++) {pageNumbers.push(i);}return pageNumbers;},/*** 重绘分页组件*/updateButtons: function () {let p = parseInt($("#p").val())let pmax = parseInt($("#pmax").val())var nav = document.getElementById('nav');nav.innerHTML = ''; // 清空nav的内容// 创建上一页按钮var prevButton = document.createElement('button');prevButton.onclick = function () {pagehelper.goto_previous();};prevButton.textContent = '上一页';if (p == 1) {// 如果当前是第一页,则不显示prevButton.style.display = 'none';}//创建五个页码let pages = pagehelper.generatePageNumbers(p, pmax);// 创建页码按钮var ul = document.createElement('ul');for (var i = 0; i < pages.length; i++) {var pageNum = pages[i];var li = document.createElement('li');var pageButton = document.createElement('button');pageButton.onclick = function (page) {return function () {pagehelper.goto_page(page);};}(pageNum); // 闭包确保正确的页码被传递pageButton.textContent = pageNum;if (pageNum == p) {// 如果不是当前页,则禁用pageButton.disabled = true;}li.appendChild(pageButton);ul.appendChild(li);}// 创建跳转输入框和下一页按钮var input = document.createElement('input');input.type = 'number';input.name = 'manual';input.placeholder = '最大页' + pmax;// 设置事件监听器input.onkeydown = function (event) {if (event.keyCode === 13) { // 只在按下回车键时验证let toPage = parseInt(this.value, 10);if (!isNaN(toPage) && toPage > 0 && toPage <= pmax) {pagehelper.goto_page(toPage);} else {pagehelper.goto_page(pmax);}}};var nextButton = document.createElement('button');nextButton.onclick = function () {pagehelper.goto_next();};nextButton.textContent = '下一页';nextButton.style.display = p < pmax ? '' : 'none'; // 如果当前是最后一页,则不显示// 将元素添加到nav中nav.appendChild(prevButton);nav.appendChild(ul);nav.appendChild(input);nav.appendChild(nextButton);}};/*** >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*                分页组件* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

http://www.ppmy.cn/devtools/87963.html

相关文章

spring框架实现滑动验证码功能

spring框架实现滑动验证码功能 1. 整体描述2. 具体实现2.1 滑动验证码实体类2.2 滑动验证码登录VO2.3 滑动验证码接口返回类2.4 滑动验证码工具类2.5 滑动验证码Service2.6 滑动验证码Controller 3 工程源码4 总结 1. 整体描述 之前项目需要在验证码模块&#xff0c;增加滑动验…

MySQL5.7 排序

一、不分组排序 (1).排序-并列数据随机顺序 select col1, col2, rank : rank 1 as rank from (select A as col1,100 as col2union all select B as col1,130 as col2union all select C as col1,120 as col2union all select D as col1,120 as col2order by col2 desc ) a,…

Git进阶(十五):不同Git仓库设置不同配置项

文章目录 一、前言二、项目配置三、全局配置四、拓展阅读 一、前言 项目源码管理阶段&#xff0c;会遇到不同项目设置不同用户信息等场景。 为不同的Git仓库设置不同的配置项&#xff0c;需要在仓库的本地配置文件中进行设置&#xff0c;而不是使用全局或系统级别的配置。Git…

文件解析漏洞总结(IIS,NGINX,APACHE)

目录 一、IIS解析漏洞 IIS6.X 方式一&#xff1a;目录解析 方式二&#xff1a;畸形文件解析 IIS7.X 利用条件 环境配置 下载链接&#xff1a; 二、Nginx解析漏洞 2.1&#xff1a;nginx_parsing 利用条件 利用姿势 2.2&#xff1a;CVE-2013-4547 影响版本 利用姿势…

手写RPC框架,与Spring整合,基于Netty作为网络框架,protobuf作为序列化协议。可以和实际项目相结合完美运行

注&#xff1a;由于RPC框架过于庞大所以本篇文章只是作为阅读RPC源码的一个指导&#xff0c;设计精巧之处还需要各位读者结合源码进行实践 RPC源码地址&#xff1a;https://github.com/xhpcd/rpc git clone: https://github.com/xhpcd/rpc.git 如果觉得有收获麻烦留下一颗st…

学会网络安全:开启广阔职业与责任之旅

在数字化时代&#xff0c;网络安全已成为社会经济发展的重要基石。随着互联网的普及和技术的飞速发展&#xff0c;网络安全威胁日益复杂多变&#xff0c;对国家安全、社会稳定以及个人隐私构成了严峻挑战。因此&#xff0c;掌握网络安全技能不仅意味着拥有了一项高价值的职业技…

【小知识】站在前人的肩膀上写程序——STL库初阶算法函数的使用

【小知识】站在前人的肩膀上写程序——STL库初阶算法函数的使用 1.墨水瓶算法和swap函数2.打擂台算法和max&#xff0c;min函数3.排序——sort函数 1.墨水瓶算法和swap函数 如果想交换两个墨水瓶的墨水该怎么办呢&#xff1f;我们可以准备第三个墨水瓶。将第一个墨水瓶的墨水倒…

Docker镜像仓库

目录 前言 1. 常见的镜像仓库 2. 搭建私有镜像仓库 3. 私有库的推送、拉取镜像 4. 总结 前言 Docker镜像仓库简单来说就是存储和管理Docker镜像的平台或服务。它允许开发人员上传自己创建的镜像&#xff0c;并与团队成员共享和协作使用。 1. 常见的镜像仓库 镜像仓库有公…