超简单的jquery版的分页一看就会

最新推荐文章于 2024-02-20 14:18:03 发布
最新推荐文章于 2024-02-20 14:18:03 发布
阅读量1.2k 收藏 2
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45568677/article/details/117200344
版权

分页

演示在最后

  1. 首先怎么实现数据的分页
  2. 确定每一页的数据量就行了，是不是超简单
  3. 比如我们本地的所有的数据一共有40条
  4. 所以每一页定的数据量是10条，一共就有4页
  5. 在这里插入图片描述
$(".ind").click(function () {
   
    $(".fnmid").children().css({
   
        "display": "none"
    })
    var num = 10;
    var tex = $(this)
最低0.47元/天 解锁文章
不会写代码的柴犬
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于jquery的web分页实现
qq_41743601的博客
10-22 762
基于jquery的web分页实现 文章目录基于jquery的web分页实现1.前言2.工具3.写代码之前的思考1.首先一个分页由一下几个部分组成：2.具体分析4.具体操作对<< 和 >> 的控制控制方块数字的变化对数字的变化控制关键步骤触发事件的代码小方块背景颜色的控制页面实现代码（使用jstl动态控制）5.完整js代码6.效果图 1.前言 之前写过一次web分页的实现，但是那次写得不够完美，还有许多需要改进得地方。其次上次写得那个是使用原生js写的，代码量比较多。所以这次选取了j
2024年前端最全基于jquery的web分页实现(1)，阿里P7大佬手把手教你
最新发布
2401_84447149的博客
05-06 601
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。
JQuery实现分页功能
pan_junbiao的博客
02-15 2万+
使用JQuery实现分页功能。 1、分页栏HTML码 2、 CSS样式文件 .g-cf:after {clear: both;content: "";display: table;} .g-cf {zoom:1;} /*分页*/ .g-pager{ text-align:center; color: #111111; font: 12px/1.5em Ari
jquery分页
qq_44091061的博客
04-25 3813
jquery分页
jQuery分页
qq_46177396的博客
04-06 549
【代码】jQuery分页。
分页功能（jQuery+bootstrap）
ioncannontic的博客
02-20 273
分页功能
Jquery简单分页实现方法
10-23
总的来说，这个jQuery分页实现方法通过简单的DOM操作和事件监听，实现了基本的分页功能。尽管它可能不包含高级特性，如动态加载、缓存或无限滚动等，但对于小型项目或学习实践，这是一个简洁且实用的解决方案。在...
最实用的jQuery分页插件
10-21
接跳转的页码 me.options.pageNo=+num; } me.creatHtml();... // 回调函数，传入当前页码 })}} 这个jQuery分页插件的设计思路简洁明了，它提供...如果你正在寻找一个简单的jQuery分页解决方案，这个插件是一个不错的选择。
jQuery通过分页加载图片列表代码
06-24
本文将深入探讨如何使用jQuery实现通过分页加载图片列表的功能，这是一个高效且用户友好的方法，尤其适用于展示大量图片时，避免一次性加载所有图片导致页面性能下降。 首先，我们需要理解分页的基本概念。分页是将...
jQuery蓝色商品分页样式代码
06-24
"jQuery蓝色商品分页样式代码" 是一个专为电商或其他需要展示商品的网站设计的分页插件，它采用jQuery库来实现功能，并赋予了分页组件优雅的蓝色主题样式。 jQuery是一个轻量级的JavaScript库，它简化了HTML文档...
jQuery简单分页样式代码
05-01
本教程将深入讲解如何使用jQuery实现一个简单的分页样式代码，该代码基于`jquery-1.8.3.min.js`库构建，并且带有详细的中文注释，便于理解和定制。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、...
jq做的分页
11-12
一个用JQUERY做的分页，挺不错的。看了许多分页的，觉得这个最好了
分页样式（CSS+JS+JQuery）
03-24
为什么要这么多的字呢？这个就是分页样式分页样式分页样式
一款不错的jQuery分页插件--pagination
热门推荐
冯小东
04-24 3万+
一、前言： 分页功能在项目中时常用到，一款可以快速实现分页功能的插件非常有必要，pagination--这款插件功能非常完美，几乎我所有项目中使用到分页的地方都会第一时间考虑到这个插件，但是其实有能力的同学最好还是使用原生的JS或者JQuery来开发分页功能，毕竟插件很多源码比较复杂，也并不是所有功能都做到尽善尽美，仅仅是提供一个方便而已。 二、具体使用方法： （1）第一步，导入jq
jQuery的分页显示
weixin_45000814的博客
05-04 1326
今天分享下前两天写的小项目中的一部分效果，就是分页显示效果，这种对于获取后端数据进行分页显示的效果很常见，代码实现也不难，如何实现请听我慢慢道来。 效果图如下 开始之前我们要安装下jQuery封装的分页插件pagination.js文件，另外我们需要在html文件中引入两个文件,如下图： 第一个是引入jQuery，第二个是引入jQuery的分页插件，之后就是js代码和后端php代码了。 <...
jquery table实现分页
DHLSP15的博客
02-04 1013
jQuery Table实现分页组件
jquery前端简单分页_如何使用jQuery创建简单的分页
cuketao5066的博客
08-03 913
jquery前端简单分页How to create easy pagination with jQuery jQuery pagination. All we know, that when we facing with necessarity to display large amount of data – we starting thinking about adding paginatio...
jQuery实现的分页小案例
柳宁依的博客
07-16 4638
网上有很多分页小插件，实现原理大概心里是知道的，但实际操作起来不知如何，自己就写了一个小案例实现了一下分页功能。因为是简单的练手，并没有用ajax请求数据，直接用了数组存储数据，数组存储了25条信息。这只是一个简单的小案例，并没有将其封装成插件。html文本很简单，ul标签里面是要展示的列表，下面的div盒子装着页码。&lt;ul class="list"&gt; &lt;/ul&gt; &lt;...
jq插件实现简单分页
月兒~圓
04-14 196
pagination.js文件 (function($){ $.fn.pagination = function(options){ var args = $.extend({ pageCount: 15, // 总页数 currentPage:1, // 当前页 backFn:function(){} },options); ms.init(this,args,options); }; var ms = { init:function(obj,a
JQUERY写一个分页
03-30
对于一个分页的实现，我们需要考虑以下几个方面： 1. 分页的总页数是多少？ 2. 每一页需要显示多少条数据？ 3. 当前页是第几页？ 4. 用户如何切换到下一页或上一页？ 5. 用户如何跳转到指定的某一页？ 下面是一个基于jQuery实现的分页示例代码： HTML代码： ``` <div class="pagination"> <ul> <li class="prev"><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li class="next"><a href="#">»</a></li> </ul> </div> ``` CSS代码： ``` .pagination { display: inline-block; margin: 20px 0; } .pagination ul { list-style: none; margin: 0; padding: 0; } .pagination li { display: inline-block; } .pagination li a { color: #666; display: block; padding: 5px 10px; text-decoration: none; } .pagination li.active a { color: #fff; background-color: #337ab7; } .pagination li.disabled a { color: #ccc; cursor: not-allowed; } ``` jQuery代码： ``` $(function() { // 定义每一页显示的数据条数和当前页码 var pageSize = 10; var currentPage = 1; // 获取数据总条数，并计算总页数 var total = 100; var totalPages = Math.ceil(total / pageSize); // 渲染分页控件 renderPagination(); // 点击页码切换到相应的页面 $('.pagination').on('click', 'a', function(e) { e.preventDefault(); var $this = $(this); if ($this.parent().hasClass('disabled') || $this.parent().hasClass('active')) { return; } if ($this.parent().hasClass('prev')) { currentPage--; } else if ($this.parent().hasClass('next')) { currentPage++; } else { currentPage = parseInt($this.text()); } renderPagination(); }); // 渲染分页控件 function renderPagination() { var html = ''; // 渲染上一页按钮 if (currentPage == 1) { html += '<li class="prev disabled"><a href="#">«</a></li>'; } else { html += '<li class="prev"><a href="#">«</a></li>'; } // 渲染数字按钮 for (var i = 1; i <= totalPages; i++) { if (i == currentPage) { html += '<li class="active"><a href="#">' + i + '</a></li>'; } else { html += '<li><a href="#">' + i + '</a></li>'; } } // 渲染下一页按钮 if (currentPage == totalPages) { html += '<li class="next disabled"><a href="#">»</a></li>'; } else { html += '<li class="next"><a href="#">»</a></li>'; } $('.pagination ul').html(html); } }); ``` 在这个示例中，我们定义了每一页显示的数据条数和当前页码，并通过计算总数据条数和每一页显示的数据条数来得到总页数。然后，我们渲染了一个分页控件，包括上一页、数字按钮和下一页三部分。当用户点击上一页或下一页按钮时，我们更新当前页码并重新渲染分页控件。当用户点击数字按钮时，我们跳转到相应的页码。最后，我们使用CSS样式来美化分页控件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值