分页器省略号算法

已于 2023-03-18 12:02:57 修改
阅读量528 收藏 1
点赞数 1
文章标签： javascript vue.js Powered by 金山文档
于 2023-03-18 12:02:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/skdjbd/article/details/129634773
版权
文章讲述了在处理分页功能时，如何根据当前页数和总页数动态生成包含省略号的页码数组。当页数小于10时，直接返回所有页数；否则，根据当前页的位置决定省略号的位置，确保关键页码（如当前页及附近页）可见。原始代码存在一些问题，因此使用for循环进行优化，以避免点击省略号时的bug。
摘要由CSDN通过智能技术生成

首先我们得知道省略号出现的时候是什么情况：

1.省略号在尾部

2.省略号在两边

最低0.47元/天 解锁文章
三少爷的键
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
12. Spring Boot 2.x 最佳实践之 Spring Data JPA 集成
极客星云-CSDN博客
10-01 961
这篇博文我们来学习下Spring Boot 与Spring Data JPA 技术的整合。
JavaScript实现带省略号的分页
如诗
05-25 1277
JavaScript实现带省略号的分页 更新实现效果地址
js分页带省略号
08-18
js分页插件 中间多着省略
jq：分页加省略号
fankse的博客
07-24 462
背景：项目中需要重写一个分页功能 代码： //重绘分页 var redrawPaging = function (pageSize, pageIndex, total) { //debugger var num = parseInt(total / pageSize) + (total % pageSize == 0 ? 0 : 1); Config.pageCount = num;
jquery带省略号的分页
06-29
jquery带省略号分页，已经亲自测试过，最近公司要求的做的分页效果就是用的这片代码
前端样式 分页中间是省略号
09-13
前端样式 分页中间是省略号，如果有什么问题，随时留言哦
带有省略号的分页组件
小明的博客
12-28 7122
带有省略号的分页组件 html中只要引入bootstrap、jquery以及我的js（元素的id及数据结构请根据实际情况自行修改） var nav = new Nav(1, 10, 1, '1.json'); nav.myAjax(); nav.getSinglePageData(); /* *
分页器省略号算法 java
最新发布
05-31
分页器省略号算法是指在分页器中，当页码数量较多时，为了减少显示的页码数量，将部分页码用省略号表示。 以下是一个简单的 Java 实现示例： ```java public static String getPageNumbers(int currentPage, int ...
PHP实现分页功能（三）含有省略号（可调节省略号位置）的分页
一只胡萝卜
09-18 854
基于THINKPHP5框架开发，实现含有省略号的分页功能；php实现含有省略号的分页功能；php实现可以调节省略号位置的分页功能；
JS实现的分页
07-28
- **动态生成页码**：通常会显示5个左右的页码，如果总页数太多，可以采用省略号表示中间页码，确保关键页码如第一页、最后一页始终可见。 4. **优化与扩展** - **缓存策略**：预加载相邻页的数据，提高用户体验...
分页中间带有省略号的分页插件
09-28
该分页插件可以设置前后显示的页码数，中间带有类似省略号的分割符。使用时，注意要引入jquery。
vue实现分页功能之带省略号（二）
weixin_51573077的博客
05-22 1515
带有省略号分页 接着上一篇，来说说，页码过多将多余页码隐藏用省略号代替 但是有些是不需要省略号的只是隐藏多余的页码即可，这代码中会有注明 保姆级代码走起 .nav{width: 550px;height: 30px;background-color: pink;display: flex;align-items: center;} div[class$=Page]{width: 80px; height: 25px;text-align: center;color: black;
js原型+jquery实现页码过多时显示省略号的分页器组件
weixin_44397974的博客
03-23 736
如果当前页为4，根据前面的省略号的排列方式，首页页码1，省略号，后面的页码3，当前页4，那么省略号只替换了一个页码（2），不符合它替换两个以上的页码的条件，我们前面已经说过，省略号必须替换2个以上的页码，这样它的出现才有意义。省略号一定是省略了2个以上的页码，也就是说只有当首页与current-1之间的页码>=2的时候才显示为省略号，否则直接显示页码，不显示省略号。根据后面的省略号的排列方式以及省略号必须代替2个页码以上的规则，我们可以得出后面的省略号出现的条件是。执行pagenation实例。
VUE_vue分页添加省略号
小歪博客
03-04 841
data: { }, computed:{ //使用计算属性返回 pages(){ let start = 16; //当前页 let end = 27; //最后一页 if(end < 10) return end; //省略号的添加是分页大于10的时候 if(start <=5){ //当前页码小于等于5 return [1,2,3,4,5,6,'...',end] //[1,2,3
分页条省略号样式逻辑
对未知的一切抱有热忱
11-16 687
没什么要点，分号区间就行了 paginationInit() { if (this.sumPage < 7) { this.paginationList = [1, 2, 3, 4, 5, 6]; } else { const cur = this.currentPage; if (cur < 4) { this.paginationList = [1, 2, 3, 4, '...', ...
日常开发：分页组件的思路梳理
qq_24724109的博客
07-19 716
分页组件的思路梳理 1. 分页组件的几种场景分析 首先这里做几个假设 假设最多显示9个分页符 省略部分用…来进行表示 场景1： 总页数小于等于9页 该场景没啥好说的 所有的分页符均显示就行了 场景2: 总页数大于9页 且只有一边存在省略情况 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0W8lMkSJ-1595141809098)(./image/image-20200718221106689.png)] 此场景有两种情况 左边省略和右边省略： 这里要注
分页省略号跳转相关功能原生写法
发现问题，面对问题，分析问题，解决问题，总结问题
06-26 2405
最近在学习前端的时候接触到了一些分页的组件，考虑到这个以后会长期使用到，特在此做个整理，虽然本次使用的Vue但是其中的代码都是可以应用到其他地方的，完全原生的写法，只需要简单修改或者换一种方式即可，没有使用Vue相关的分页组件，其中功能大致如下： 首页，上一页，下一页，尾页，跳转（需要限制数字），页数过多显示省略号，省略号位置和页面页数都需要可以进行调整的,效果图如下，只为演示功能，没有额外的样式效果，具体的参数都可以在Vue的data属性中进行设置切换，详细请看代码注释 后端使用的是MyBatis的分页
android网页省略分页器,带省略的分页
weixin_36246576的博客
05-26 294
这个ajax分页是基本jquery来实现的，足以满足正常需求。。。效果：HTML：CSS：.zh-page{height: 20px;padding: 20px 0;text-align: right;}.zh-page ul{display: inline-block;height: 20px;}.zh-page ul li{float: left;height: 20px;line-heigh...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值