前后端分离，通用分页js处理模板

功能

        **可实现一个页面多个ajax无刷新分页列表**

        **可解决页面数量非常多的问题**

效果：

截图：

 步骤：

第一步：创建一个index.html引入    <script src="./jquery-3.7.0.js"></script><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script><script src="./page-zjs-20230630.js"></script>第二步：在index.html的body复制进去<nav aria-label="Page navigation" style="margin-top: 50px;text-align: right;"><input type="text" name="pagenumber" value="1" hidden /><ul class="pagination"></ul></nav>在最下面加入<script type="text/javascript">var tbody = $('#tbody'); //内容栏var pageHtml = $('.pagination'); // 分页栏</script>第三步：配置page-zjs-20230630.js各项参数TODO的地方是你需要改的，其他地方不需要改

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./jquery-3.7.0.js"></script><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script><script src="./page-zjs-20230630.js"></script><style></style>
</head><body>
<div align="center"><table class="table table-bordered" id="tab"><thead style-"margin: auto; text-align: center;"><tr><td>序号</td><td>名称</td></tr><tr><td>1 </td><td>张三 </td></tr></thead><tbody id-"tbody"></tbody></table><nav aria-label="Page navigation" style="margin-top: 50px;text-align: right;"><input type="text" name="pagenumber" value="1" hidden /><ul class="pagination"></ul></nav></div>
</body>
</html><script type="text/javascript">var tbody = $('#tbody'); //内容栏var pageHtml = $('.pagination'); // 分页栏
</script>

page-zjs-20230630.js

//注意
//1,如果一个页面多个分页列表的话  一个js控制一个列表，tobody的类标签名字不同即可。
//2,目前查询只支持get请求
//3,TODO的地方需要你修改,其他地方不需要做任何修改//这几个参数需要需要你配置   TODOlet var_PageSize = 10;//每页数量let var_pageNo = 1;//初始页码let total = 0;//全局变量let PageIndex = 0;//全局变量let PageSize = 0;//全局变量let totalPage = 0;//全局变量let var_url ="http://172.17.4.220:8080/info/lhxm-fb!getLhxmfbFenzhanData.action?PageSize="+var_PageSize;$(document).ready(function () {//获取接口数据let url = var_url+"&pageNo="+var_pageNo;//第一页调用getData(url,var_pageNo);})function getData(url,current_page) {//搜索条件   TODO// let lhfbjg = $("#u name" ).val();// let lhfbjg = "中国技术交易所有限公司";// if(lhfbjg!=""){//     url=url+"&lhfbjg="+lhfbjg;// }let result ={};console.log("第"+current_page+"页的结果:"+url);$.ajax({url:url,type : "get",    //请求类型dataType:'json',success:function(result){//遍历数据的地方    TODO//页码(数据总条数-当前页)if(current_page==1){pageHtml.empty();setPageValue(result);}console.log(result);}})}function setPageValue(result){total = result.total; // 数据总条数PageIndex = result.pageNo;// 当前页PageSize = var_PageSize; //一页显示10条totalPage =  Math.ceil(result.total / PageSize);// 获取到总页数setPages(total,PageIndex,PageSize,pageHtml,totalPage);}function setPages(total,PageIndex,PageSize,pageHtml,totalPage) {event.preventDefault();let needPlus;//控制有无数据if(totalPage==0){needPlus  = "" ;}else if (totalPage > 0&&PageIndex!=totalPage) {needPlus = "href='"+var_url+"&pageNo="+(PageIndex+1)+"'";}else if (totalPage > 0&&PageIndex==totalPage) {// needPlus = PageIndex == totalPage >0 ? "" : "href='"+var_url+"&pageNo="+(PageIndex+1)+"'";needPlus="";}let needReduce = PageIndex == 1 ? "" : "href='"+var_url+"&pageNo="+(PageIndex-1)+"'";// console.log("右侧链接"+needPlus);// console.log("左侧链接"+needReduce);let pageBtnPrev = "<li class='page-item btnPrev'><a class='page-link' aria-label='Previous' " + needReduce +"'><span aria-hidden='true'>«</span></a ></li>";let pageBtnNext = "<li class='page-item btnNext'><a class='page-link' aria-label='Next' " + needPlus +"'><span aria-hidden='true'>»</span></a></li>";let pageTips = "<div style='line-height:38px;text-align: left'>" + PageIndex + " " + "-" + " " + totalPage + " " + "of" + " " + total + " " + "items" + "</div > ";pageHtml.append(pageBtnPrev); // 添加左按钮// 第一页let firstPage = $("<li class='page-item' pagenumber=1><a class='page-link' href='"+var_url+"&pageNo=1'>1</a ></li> ");// 最后一页let lastPage = $("<li class='page-item' pagenumber='" + totalPage + "'><a class='page-link' href='"+var_url+"&pageNo=" + totalPage + "'>" + totalPage + "</a ></li>");// 左省略号let leftOmitPage = $("<li class='page-item' id='leftOmit'><a class='page-link'>...</a></li>");// 右省略号let rightOmitPage = $("<li class='page-item' id='rightOmit'><a class='page-link'>...</a></li>");// 左省略号图标let leftOmitIcon = $("<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-left' viewBox='0 0 16 16'>" +"<path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");// 右省略号图标let rightOmitIcon = $("<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-right' viewBox='0 0 16 16'>" +"<path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");// 总页数小于等于10页全部显示if (totalPage <= 10) {for (let i = 1; i <= totalPage; i++) {pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link' href='"+var_url+"&pageNo=" + i + "'>" + i + "</a ></li> "));}} else if (PageIndex <= 8) {  //总页数大于10且当前页远离总页数for (let i = 1; i <= 9; i++) {pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link' href='"+var_url+"&pageNo=" + i + "'>" + i + "</a ></li> "));}pageHtml.append(rightOmitPage);pageHtml.append(lastPage);//总页数大于10且当前页接近总页数} else if (PageIndex > totalPage - 7) {pageHtml.append(firstPage);pageHtml.append(leftOmitPage);for (let i = totalPage - 8; i <= totalPage; i++) {pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link' href='"+var_url+"&pageNo=" + i + "'>" + i + "</a ></li> "));}//除开上面两个情况 当前页在中间} else {pageHtml.append(firstPage);pageHtml.append(leftOmitPage);for (let i = PageIndex - 3; i <= PageIndex + 3; i++) {pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link' href='"+var_url+"&pageNo=" + i + "'>" + i + "</a ></li> "));}pageHtml.append(rightOmitPage);pageHtml.append(lastPage);}$(".pagination li[pagenumber='" + PageIndex + "']").addClass('active');pageHtml.append(pageBtnNext); // 添加右按钮pageHtml.append(pageTips); // 添加右下角items提示栏/* 点击页码按钮进行翻页 */$(".pagination li[pagenumber]").on('click', function() { // 页数跳转pageHtml.empty();PageIndex = Number($(this).text()); // 当前页$('input[name=pagenumber]').attr('value', PageIndex); // 当前第几页$(this).siblings('li').removeClass('active');$(this).addClass('active');setPages(total,PageIndex,PageSize,pageHtml,totalPage);let current_url = $(this).children("a").attr("href");// var_pageNo = PageIndex;getData(current_url,PageIndex);})/* 点击按钮进行翻页 */$(".btnPrev").on('click', function () { // 向左翻页if (PageIndex > 1) {PageIndex--;pageHtml.empty();setPages(total,PageIndex,PageSize,pageHtml,totalPage);let current_url = $(this).children("a").attr("href");var_pageNo = PageIndex;getData(current_url,PageIndex);}$(this).addClass('disabled');})$(".btnNext").on('click', function () { // 向右翻页if (PageIndex < totalPage) {PageIndex++;pageHtml.empty();setPages(total,PageIndex,PageSize,pageHtml,totalPage);let current_url = $(this).children("a").attr("href");var_pageNo = PageIndex;getData(current_url,PageIndex);}$(this).addClass('disabled');})/* 点击左省略号向左翻页 */$('#leftOmit').click(function () {if (PageIndex > 10) {PageIndex -= 10;pageHtml.empty();setPages(total,PageIndex,PageSize,pageHtml,totalPage);var_pageNo = PageIndex;let current_url = var_url+"&pageNo="+PageIndex;                    getData(current_url,PageIndex);}})/* 点击右省略号向右翻页 */$('#rightOmit').click(function () {if (PageIndex <= totalPage - 10) {PageIndex += 10;pageHtml.empty();setPages(total,PageIndex,PageSize,pageHtml,totalPage);var_pageNo = PageIndex;let current_url = var_url+"&pageNo="+PageIndex;getData(current_url,PageIndex);}})/* 左省略号移入移出 */$('#leftOmit').mouseenter(function () {$(this).children().html(leftOmitIcon);})$('#leftOmit').mouseleave(function () {$(this).children().html('...');})/* 右省略号移入移出 */$('#rightOmit').mouseenter(function () {$(this).children().html(rightOmitIcon);})$('#rightOmit').mouseleave(function () {$(this).children().html('...');})}

jquery-3.7.0要是粘贴在这里，提示【文字太多，发布不了】，所以随便下载一个版本就可以。

参考：bootstrap分页处理_bootstrap分页过多_big_title的博客-CSDN博客

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

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

相关文章

华为云GaussDB，能否成为数据库国产化替代的“更优选择”？

华为云GaussDB，能否成为数据库国产化替代的“更优选择”？

没有一个行业比数据库更需要长期主义&#xff0c;而在践行长期主义的道路上&#xff0c;国内数据库厂商中华为是不可忽视的存在。 近日&#xff0c;Gartner Peer Insights《Voice of the Customer for Cloud Database Management Systems&#xff0c;2023》报告发布&#xff0…
阅读更多...
JMeter HTTP请求的详细指南，还不知道的快来看

JMeter HTTP请求的详细指南，还不知道的快来看

目录 JMeter HTTP请求简介 什么是JMeter HTTP请求&#xff1f; 如何使用JMeter的HTTP请求&#xff1f; JMeter HTTP请求配置 创建JMeter HTTP请求 JMeter HTTP请求实例 结论 JMeter HTTP请求简介 在JMeter中&#xff0c;服务器名称和它的路径对于检查请求是否到达了正确…
阅读更多...
10W+前端面试题面试资料八股文

10W+前端面试题面试资料八股文

点击下方链接获取全部内容文档题目及其答案: 10W前端面试题&面试资料&八股文题目及其答案 https://m.tb.cn/h.5a7v237?tkQeVPdsoKwr4 CZ3457 部分题目如下&#xff1a; 1. call丶apply丶bind区别及源码实现&#xff08;手写&#xff09; 不同点&#xff1a; call…
阅读更多...
（二）线程的六种状态及上下文切换

（二）线程的六种状态及上下文切换

&#xff08;二&#xff09;线程的六种状态及上下文切换 2.1 操作系统中线程的状态及切换2.2 Java 中线程的六种状态01、NEW&#xff08;线程尚未启动&#xff09;02、RUNNABLE&#xff08;运行中&#xff09;03、BLOCKED&#xff08;阻塞状态&#xff09;04、WAITING&#xff…
阅读更多...
Linux--共同访问的公共目录不允许a用户删除b用户目录或文件：粘滞位 -t

Linux--共同访问的公共目录不允许a用户删除b用户目录或文件：粘滞位 -t

情景&#xff1a; ①当多个用户共享同一个目录&#xff0c;需要在该目录下&#xff0c;进行读写、创建文件 ②但是自己只能删除自己的&#xff0c;而不能删除别人的&#xff08;w:可以互删的&#xff0c;但是不满足条件&#xff09; 语法&#xff1a; chmod t 目录名 注意…
阅读更多...
Java（六）：Eureka项目搭建、数据请求

Java（六）：Eureka项目搭建、数据请求

Eureka项目搭建、数据请求 Eureka简介Eureka项目创建1、新建Maven项目2、只保留Maven项目的依赖文件3、创建子模块&#xff08;Eureka服务模块&#xff09;4、修改pom.xml5、创建并修改配置文件6、添加Eureka注解7、运行8、创建其他服务9、修改pom.xml10、创建并修改配置文件11…
阅读更多...
Docker-compose的使用

Docker-compose的使用

目录 Docker-compose 简介 docker-compose的安装 docker-compose.yaml文件说明 compose的常用命令 总结 Docker-compose 简介 Docker-compose 是用于定义和运行多容器的 Docker 应用程序的工具。可以使用YAML文件来配置应用程序的服务。&#xff08;通俗讲是可以通过yml文…
阅读更多...
【Spring Cloud系列】- Eureka使用详解

【Spring Cloud系列】- Eureka使用详解

【Spring Cloud系列】- Eureka使用详解 文章目录 【Spring Cloud系列】- Eureka使用详解一、概述二、Eureka简介三、Eureka结构与作用Eureka结构图Eureka采用CS&#xff08;Client/Server,客户端/服务器&#xff09;架构&#xff0c;它包括以下两大组件 四、Eureka集群及与应用…
阅读更多...
stable-diffusion 预训练模型汇总

stable-diffusion 预训练模型汇总

目前各个github上各个库比较杂乱&#xff0c;故此做些整理方便查询 Stable UnCLIP 2.1 New stable diffusion finetune (Stable unCLIP 2.1, Hugging Face) at 768x768 resolution, based on SD2.1-768. This model allows for image variations and mixing operations as d…
阅读更多...
Rust语言从入门到入坑——(11)面向对象

Rust语言从入门到入坑——(11)面向对象

文章目录 0、引入1、封装2、继承3、多态4、引用 0、引入 Rust 不是面向对象的编程语言&#xff0c;但是可以实现面向对象方法&#xff1a;封装与继承&#xff0c;以及不完全的多态 1、封装 "类"往往是面向对象的编程语言中常用到的概念。"类"封装的是数据…
阅读更多...
Windows 解决cmd/dos窗口中文乱码问题

Windows 解决cmd/dos窗口中文乱码问题

文章目录 一、问题描述二、解决方案1. 更改DOS窗口代码页方式1&#xff1a;更改dos窗口代码页&#xff08;临时有效&#xff09;方式2&#xff1a;修改注册表CodePage项&#xff08;永久有效&#xff09;方式3&#xff1a;修改 .lnk 快捷方式的文件属性&#xff08;永久有效&am…
阅读更多...
STM32F4_nRF24L01无线通讯

STM32F4_nRF24L01无线通讯

目录 前言&#xff1a; 1. nRF24L01无线模块简介 2. nRF24L01状态机 3. nRF24L01模式 4. nRF24L01的SPI配置 4.1 nRF24L01 Rx 和 Tx 的初始化配置 4.2 nRF24L01相关寄存器 5. 硬件连接 6. 实验程序 6.1 main.c 6.2 NRF24L01.c 6.3 NRF24L01.h 前言&#xff1a; S…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023