封装个js分页插件

// 分页插件类
class PaginationPlugin {constructor(fetchDataURL, options = {}) {this.fetchDataURL = fetchDataURL;this.options = {containerId: options.containerId || 'paginationContainer',dataSizeAttr: options.dataSizeAttr || 'toatalsize', // 修改为实际API返回的数据属性名pageSizeAttr: options.pageSizeAttr || 'size',onPageChange: options.onPageChange || (() => {}),};this.paginationData = {};this.totalPages=0;}async init() {const initialData = await this.fetchData(1);this.paginationData = initialData;this.totalPages=initialData.data.totalpage;this.options.onPageChange(initialData);this.createPagination(this.options.containerId);this.bindEventListeners(this.options.containerId);}createPagination(containerId) {// ... 保留原有的创建分页组件逻辑 ..const container = document.getElementById(containerId);container.innerHTML=''// 创建上一页按钮const prevPageButton = document.createElement('button');prevPageButton.id = 'prevPage';prevPageButton.textContent = '上一页';prevPageButton.classList.add('bg-blue-200','w-14', 'hover:bg-blue-700', 'text-white','text-sm',  'py-1', 'px-1', 'rounded', 'ml-2');// 创建下一页按钮const nextPageButton = document.createElement('button');nextPageButton.id = 'nextPage';nextPageButton.textContent = '下一页';nextPageButton.classList.add('bg-blue-500', 'w-14','hover:bg-blue-700', 'text-white', 'text-sm','py-1', 'px-1', 'rounded', 'ml-2');// 创建跳转按钮const gotoPageButton = document.createElement('button');gotoPageButton.id = 'gotoPageButton';gotoPageButton.textContent = '跳转';gotoPageButton.classList.add('bg-blue-500','w-14', 'hover:bg-blue-700', 'text-white', 'text-sm', 'py-1', 'px-1', 'rounded', 'ml-2');// 创建输入框const gotoPageInput = document.createElement('input');gotoPageInput.id = 'gotoPageInput';gotoPageInput.type = 'number';gotoPageInput.placeholder = '页码';gotoPageInput.classList.add('w-16', 'p-1', 'mt-1', 'border','text-sm', 'border-gray-300', 'rounded-md', 'ml-2');// 创建分页按钮容器const paginationContainer = document.createElement('div');paginationContainer.id = 'pagination';paginationContainer.classList.add('flex', 'justify-center');// 创建分页按钮列表let pages = [];const visibleRange = 5; // 显示5个完整页码const halfVisibleRange = Math.floor(visibleRange / 2); // 对称显示，一半数量的完整页码if (this.totalPages > visibleRange) {// 开始页码let startPage = this.paginationData.data.page - halfVisibleRange;if (startPage <= 0) {startPage = 1;}// 结束页码let endPage = this.paginationData.data.page + halfVisibleRange;if (endPage > this.totalPages) {endPage = this.totalPages;startPage = Math.max(startPage - (endPage - this.totalPages), 1);}// 添加开始页码之前的页码if (startPage > 1) {pages.push(1);if (startPage > 2) {pages.push('...');}}// 添加中间页码for (let i = startPage; i <= endPage; i++) {pages.push(i);}// 添加结束页码之后的页码if (endPage < this.totalPages) {pages.push('...');pages.push(this.totalPages);}} else {for (let i = 1; i <= this.totalPages; i++) {pages.push(i);}}pages.forEach((page) => {const button = document.createElement('button');button.id = `page-${page}`;button.textContent = page;button.classList.add('px-4', 'py-1', 'border', 'border-gray-300','text-sm', 'rounded-md', 'text-gray-700','ml-1',);if (page === this.paginationData.data.page) {button.classList.remove('text-gray-700');button.classList.add('bg-blue-500', 'text-white');}paginationContainer.appendChild(button);});// 创建分页信息容器const pageInfoContainer = document.createElement('div');pageInfoContainer.id = 'pageInfoContainer';pageInfoContainer.classList.add('flex',  'text-sm','justify-end');// 创建分页信息const pageInfo = document.createElement('span');pageInfo.id = 'pageInfo';pageInfo.textContent = `共 ${paginationData.data.toatalsize} 条记录，每页 ${paginationData.data.size} 条记录，当前第 ${paginationData.data.page} 页,共${paginationData.data.totalpage}页`;pageInfoContainer.appendChild(pageInfo);pageInfo.classList.add('ml-2','mt-2');// 创建跳转到第一页按钮const firstPageButton = document.createElement('button');firstPageButton.id = 'firstPageButton';firstPageButton.textContent = '首页';firstPageButton.classList.add('bg-blue-500','w-14', 'hover:bg-blue-700', 'text-white','text-sm',  'py-1', 'px-1', 'rounded', 'ml-2');pageInfoContainer.appendChild(firstPageButton);// 创建跳转到最后一页按钮const lastPageButton = document.createElement('button');lastPageButton.id = 'lastPageButton';lastPageButton.textContent = '尾页';lastPageButton.classList.add('bg-blue-500','w-14', 'hover:bg-blue-700', 'text-white','text-sm',  'py-1', 'px-1', 'rounded', 'ml-2');pageInfoContainer.appendChild(lastPageButton);// 将所有元素添加到容器中container.appendChild(prevPageButton);container.appendChild(nextPageButton);container.appendChild(gotoPageInput);container.appendChild(gotoPageButton);container.appendChild(paginationContainer);container.appendChild(pageInfoContainer);}// 更新选中的分页按钮updateSelectedPage(page, containerId) {const container = document.getElementById(containerId);const buttons = container.querySelectorAll('#pagination button');buttons.forEach((button) => {if (button.id === `page-${page}`) {button.classList.remove('text-gray-700');button.classList.add('bg-blue-500', 'text-white');} else {button.classList.add('text-gray-700');button.classList.remove('bg-blue-500', 'text-white');}});}bindEventListeners(containerId) {const prevPageButton = document.getElementById('prevPage');const nextPageButton = document.getElementById('nextPage');const gotoPageButton = document.getElementById('gotoPageButton');const gotoPageInput = document.getElementById('gotoPageInput');const pageInfoContainer = document.getElementById('pageInfoContainer');const firstPageButton = document.getElementById('firstPageButton');const lastPageButton = document.getElementById('lastPageButton');prevPageButton.addEventListener('click',async () => {const currentPage = parseInt(this.paginationData.data.page);if(currentPage==2){prevPageButton.classList.add('bg-blue-200');prevPageButton.classList.remove('bg-blue-500');}if(currentPage==1){alert("已经是第一页了");return;}if (currentPage > 1) {this.paginationData.data.page = currentPage - 1;const initialData =await  this.fetchData(  this.paginationData.data.page);this.paginationData = initialData;this.totalPages=initialData.data.totalpage;this.options.onPageChange(initialData);this.createPagination(this.options.containerId);this.bindEventListeners(this.options.containerId);this.updateSelectedPage(this.paginationData.data.page,containerId)}});nextPageButton.addEventListener('click', async() => {const currentPage = parseInt(this.paginationData.data.page);if( currentPage==this.totalPages){alert("已经是最后一页了");return;}prevPageButton.classList.remove('bg-blue-200');prevPageButton.classList.add('bg-blue-500');if (currentPage < this.totalPages) {const initialData =await  this.fetchData( this.paginationData.data.page);this.paginationData = initialData;this.totalPages=initialData.data.totalpage;this.paginationData.data.page = currentPage + 1;this.options.onPageChange(initialData);this.createPagination(this.options.containerId);this.bindEventListeners(this.options.containerId);this.updateSelectedPage(this.paginationData.data.page,containerId)}});gotoPageButton.addEventListener('click', async() => {const input = document.getElementById('gotoPageInput');const page = parseInt(input.value);if (!isNaN(page) && page > 0 && page <= this.totalPages) {const initialData =await  this.fetchData(page);this.paginationData = initialData;this.totalPages=initialData.data.totalpage;this.paginationData.data.page = page;this.options.onPageChange(initialData);this.createPagination(this.options.containerId);this.bindEventListeners(this.options.containerId);}});firstPageButton.addEventListener('click', async() => {this.paginationData.data.page = 1;const initialData =await  this.fetchData(this.paginationData.data.page);this.paginationData = initialData;this.totalPages=initialData.data.totalpage;this.options.onPageChange(initialData);this.createPagination(this.options.containerId);this.bindEventListeners(this.options.containerId);});lastPageButton.addEventListener('click',async () => {const initialData =await  this.fetchData(this.totalPages);this.paginationData = initialData;this.totalPages=initialData.data.totalpage;this.paginationData.data.page = this.totalPages;this.options.onPageChange(initialData);this.createPagination(this.options.containerId);this.bindEventListeners(this.options.containerId);});// ... 保留原有的事件绑定逻辑 ...const paginationButtons = document.querySelectorAll(`#${containerId} button[id^="page-"]`);paginationButtons.forEach((button) => {button.addEventListener('click', async (event) => {const targetPage = parseInt(event.target.id.replace('page-', ''));const initialData = await this.fetchData(targetPage);this.paginationData = initialData;this.totalPages=initialData.data.totalpage;this.paginationData.data.page =targetPage;this.options.onPageChange(initialData);this.createPagination(this.options.containerId);this.bindEventListeners(this.options.containerId);});});}async fetchData(page) {const url = `${this.fetchDataURL}&page=${page}&size=10`;try {const response = await fetch(url);const jsonData = await response.json();return jsonData;} catch (error) {console.error('There has been a problem with your fetch operation:', error);return null;}
}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/1055.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ppt技巧：​如何将两个PPT幻灯片文件合并成一个？

ppt技巧：​如何将两个PPT幻灯片文件合并成一个？

第一种方式&#xff1a;复制粘贴幻灯片 1. 打开第一个PPT幻灯片文件&#xff0c;确保你已经熟悉该文件的内容和布局。 2. 打开第二个PPT幻灯片文件&#xff0c;浏览其中的所有幻灯片&#xff0c;选择你想要合并到第一个文件中的幻灯片。 3. 使用快捷键CtrlC&#xff08;Wind…
阅读更多...
虚拟ip地址怎么弄到手机上

虚拟ip地址怎么弄到手机上

在当下的社会&#xff0c;手机已经变得至关重要&#xff0c;它融入了我们的日常生活&#xff0c;无论是上网冲浪、社交互动&#xff0c;还是工作学习&#xff0c;都离不开它。但有时候&#xff0c;由于某些限制&#xff0c;我们可能无法充分享受网络带来的便利。这时&#xff0…
阅读更多...
Nginx part2.1

Nginx part2.1

目录 搭建目录网页 为网页设置用户登录 做一个文件目录网页&#xff0c;并进行登陆 示范 搭建目录网页 启动nginx&#xff1a; systemctl start nginx 开机自启动nginx&#xff1a; systemctl enable nginx 启动完服务后&#xff0c;查看自己的nginx的状态&#xff1a;sys…
阅读更多...
【JavaWeb】Day47.Mybatis基础操作——删除

【JavaWeb】Day47.Mybatis基础操作——删除

Mybatis基础操作 需求 准备数据库表 emp 创建一个新的springboot工程&#xff0c;选择引入对应的起步依赖&#xff08;mybatis、mysql驱动、lombok&#xff09; application.properties中引入数据库连接信息 创建对应的实体类 Emp&#xff08;实体类属性采用驼峰命名&#xf…
阅读更多...
【C++提高】常用容器

【C++提高】常用容器

常用容器 引言&#xff1a;迭代器的使用一、vector容器1. vector基本概念2. vector的迭代器3. vector构造函数4. vector赋值操作5. vector容量和大小6. vector插入和删除7. vector数据存取8. vector互换容器9. vector预留空间 二、deque容器1. deque容器的基本概念2. deque容器…
阅读更多...
python免费调用阿里云通义千问（q-wen-max)大模型API

python免费调用阿里云通义千问（q-wen-max)大模型API

文章目录 通义千问开通免费API Keypython调用阿里云通义千问API 通义千问 通义千问&#xff0c;是基于阿里巴巴达摩院在自然语言处理领域的研究和积累。采用更先进的算法和更优化的模型结构&#xff0c;能够更准确地理解和生成自然语言、代码、表格等文本。 支持更多定制化需…
阅读更多...
HarmonyOs开发：导航tabs组件封装与使用

HarmonyOs开发：导航tabs组件封装与使用

前言 主页的底部导航以及页面顶部的切换导航&#xff0c;无论哪个系统&#xff0c;哪个App&#xff0c;都是最常见的功能之一&#xff0c;虽然说在鸿蒙中有现成的组件tabs可以很快速的实现&#xff0c;但是在使用的时候&#xff0c;依然有几个潜在的问题存在&#xff0c;第一&a…
阅读更多...
GRAF: Generative Radiance Fields for 3D-Aware Image Synthesis

GRAF: Generative Radiance Fields for 3D-Aware Image Synthesis

GRAF: Generative Radiance Fieldsfor 3D-Aware Image Synthesis&#xff08;基于产生辐射场的三维图像合成&#xff09; 思维导图&#xff1a;https://blog.csdn.net/weixin_53765004/article/details/137944206?csdn_share_tail%7B%22type%22%3A%22blog%22%2C%22rType%22%3…
阅读更多...
THREEJS 使用CatmullRomCurve3实现汽车模型沿着指定轨迹移动

THREEJS 使用CatmullRomCurve3实现汽车模型沿着指定轨迹移动

效果预览 准备所需资源 搭建场景环境 const container document.querySelector("#box_bim");// 创建摄像机camera new THREE.PerspectiveCamera(50,window.innerWidth / window.innerHeight,0.1,1000);// camera.position.set(500, 500, 500);// 调整近裁减值camer…
阅读更多...
深入剖析图像平滑与噪声滤波

深入剖析图像平滑与噪声滤波

噪声 在数字图像处理中&#xff0c;噪声是指在图像中引入的不希望的随机或无意义的信号。它是由于图像采集、传输、存储或处理过程中的各种因素引起的。 噪声会导致图像质量下降&#xff0c;使图像失真或降低细节的清晰度。它通常表现为图像中随机分布的亮度或颜色变化&#…
阅读更多...
面试不慌张：一文读懂FactoryBean的实现原理

面试不慌张：一文读懂FactoryBean的实现原理

大家好&#xff0c;我是石头~ 在深入探讨Spring框架内部机制时&#xff0c;FactoryBean无疑是一个关键角色&#xff0c;也是面试中经常出现的熟悉面孔。 不同于普通Java Bean&#xff0c;FactoryBean是一种特殊的Bean类型&#xff0c;它的存在并非为了提供业务逻辑&#xff0c;…
阅读更多...
基于Springboot的小区物业管理系统

基于Springboot的小区物业管理系统

基于SpringbootVue的小区物业管理系统的设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringbootMybatis工具&#xff1a;IDEA、Maven、Navicat 系统展示 用户登录 首页 用户管理 员工管理 业主信息管理 费用信息管理 楼房信息管理 保修信息…
阅读更多...
【原创教程】海为PLC与RS-WS-ETH-6传感器的MUDBUS_TCP通讯

【原创教程】海为PLC与RS-WS-ETH-6传感器的MUDBUS_TCP通讯

一、关于RS-WS-ETH-6传感器的准备工作 要完成MODBUS_TCP通讯，我们必须要知道设备的IP地址如何分配，只有PLC和设备的IP在同一网段上，才能建立通讯。然后还要选择TCP的工作模式，来建立设备端和PC端的端口号。接下来了解设备的报文格式，方便之后发送报文完成数据交互。 1、…
阅读更多...
自定义Blazor单文件Web程序端口

自定义Blazor单文件Web程序端口

#接 上篇 Mysql快速迁移版的制作过程# 上一篇《Mysql8快速迁移版的制作过程》完成了快速迁移的数据库的准备&#xff0c;今天接着讲基于Blazor的Web程序快速迁移版的制作。 单文件发布的难点不在发布而是因为程序系统默认给了个5001的端口&#xff0c;而是如何能够让用户自定…
阅读更多...
AOP基础-动态代理

AOP基础-动态代理

文章目录 1.动态代理1.需求分析2.动态代理的核心3.代码实例1.Vehicle.java2.Car.java3.Ship.java4.VehicleProxyProvider.java(动态代理模板)5.测试使用 2.动态代理深入—横切关注点1.需求分析2.四个横切关注点3.代码实例1.Cal.java2.CalImpl.java3.VehicleProxyProvider02.jav…
阅读更多...
0-1背包问题：贪心算法与动态规划的比较

0-1背包问题：贪心算法与动态规划的比较

0-1背包问题&#xff1a;贪心算法与动态规划的比较 1. 问题描述2. 贪心算法2.1 贪心策略2.2 伪代码 3. 动态规划3.1 动态规划策略3.2 伪代码 4. C语言实现5. 算法分析6. 结论7. 参考文献 1. 问题描述 0-1背包问题是组合优化中的一个经典问题。假设有一个小偷在抢劫时发现了n个…
阅读更多...
（C语言）sscanf 与 sprintf详解

（C语言）sscanf 与 sprintf详解

目录 1.sprintf函数详解 2. sscanf函数详解 1.sprintf函数详解 头文件&#xff1a;stdio.h 作用&#xff1a;将格式化的数据写入字符串里&#xff0c;也就是将格式化的数据转变为字符串。 演示&#xff1a; #include <stdio.h> struct S {char name[10];int height;…
阅读更多...
NX二次开发——矩形排料5（基于最低水平线+遗传算法排料策略实现）

NX二次开发——矩形排料5（基于最低水平线+遗传算法排料策略实现）

目录 一、概述 二、知识回顾 2.1适应度函数的确定 2.2基因编码 2.3遗传算法复制&#xff08;选择&#xff09; 2.4遗传算法交叉操作 通过交叉操作可以增加种群个体的多样性&#xff0c;既可以产生更多的优秀解。下面通过顺序编码方法进行改进&#xff08;网上有很…
阅读更多...
vue3：树的默认勾选和全选、取消全选

vue3：树的默认勾选和全选、取消全选

实现的功能&#xff0c;上面有个选择框&#xff0c;当选中全部时&#xff0c;下方树被全选 代码&#xff1a; <template><div><el-select v-model"selectAll" style"margin-bottom: 10px;" change"handleSelectAllChange">&…
阅读更多...
electron打包dist为可执行程序后记【electron-quick-start】

electron打包dist为可执行程序后记【electron-quick-start】

文章目录 目录 文章目录 前言 一、直接看效果 二、实现步骤 1.准备dist文件夹 2.NVM管理node版本 3.准备electron容器并npm run start 4.封装成可执行程序 1.手动下载electron对应版本的zip文件&#xff0c;解决打包缓慢问题 2.安装packager 3.配置打包命令执行内容…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023