快速实现-简单分页器(上)

首先形形色色的分页器大家肯定都看过，这一次就快速实现一个简单的分页器，应该不会耽搁太久吧~

先来看一下简洁布局：

瞜一眼这布局：

页码数量总共只有9个

当足够显示所有页码的情况就全部显示了

那么问题来了，如果不够呢？

第一种情况
第二种情况
第三种情况

正点：

总共只能显示九个页码

当不够的是则显示省略号

最主要的是省略号的位置，而省略号的位置由取决于当前页码处于哪里
3.1 当前页码接近首页时，则小于等于 7，省略号靠近尾页
3.2 当前页码接近尾页时，则大于等于尾页 - 7，省略号靠近首页
3.3 当以上不成立的时候，首尾两边都有省略号

必须凑足九个页码

function pageView(total, cur) {var pageNum = [];// 小于九个页码，开开心心if (total <= 9) {for (var i = 0; i < total; i++) {pageNum.push(i + 1);}} else {// 超出九个页码另当别论if (cur <= 7) {// 前面显示的页码for (var i = 0; i < 7; i++) {pageNum.push(i + 1);}// 补齐页码pageNum.push('...', total);} else if (cur >= total - 7) {// 后面显示的页码for (var i = 0; i < 7; i++) {pageNum.unshift(total - i);}// 补齐页码pageNum.unshift(1, '...');} else {// 凑足九个页码pageNum = [1, '...', cur - 2, cur - 1, cur, cur + 1, cur + 2, '...', total];}}return pageNum;}

打印效果

    // 刚刚好，万事大吉var total = 9;var cur = 1;console.log(pageView(total, cur)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]// 当前页码靠近首页total = 100;cur = 1;console.log(pageView(total, cur)); // [1, 2, 3, 4, 5, 6, 7, "...", 100]// 当前页码靠近尾页total = 100;cur = 99;console.log(pageView(total, cur)); // [1, "...", 94, 95, 96, 97, 98, 99, 100]// 当前页码靠中间total = 100;cur = 50;console.log(pageView(total, cur)); // [1, "...", 48, 49, 50, 51, 52, "...", 100]

事情并没有那么简单~

上面的7应该是活的，（cur - 2, cur - 1, cur, cur + 1, cur + 2）也应该是活的，因为页码不可能就用于是九个，哪天我就想要一个能显示15个页码的呢？很简单，改造一下

当前页j接近于左右某一端 : 用可显示页码的个数 - 2
原因：首页，尾页总得占一个，再加上一个省略号

情况居于中间: (用可显示页码的个数 - 5）/ 2；
原因：首页，尾页，两个省略号，一个当前页，然后除于2，是因为当前页左右两边平均分

function pageView(total, cur, pagesLen) {var pageNum = [];// 小于九个页码，开开心心if (total <= pagesLen) {for (var i = 0; i < total; i++) {pageNum.push(i + 1);}} else {// 超出九个页码另当别论var max = pagesLen - 2; // 首|尾 + ...if (cur <= max) {// 前面显示的页码for (var i = 0; i < max; i++) {pageNum.push(i + 1);}// 补齐页码pageNum.push('...', total);} else if (cur >= total - max) {// 后面显示的页码for (var i = 0; i < max; i++) {pageNum.unshift(total - i);}// 补齐页码pageNum.unshift(1, '...');} else {// 凑足pagesLen个页码var around = (pagesLen - 5) / 2;// 当前页左右两边的页码var leftArr = [];var rightArr = [];for (var i = 1; i <= around; i++) {leftArr.unshift(cur - i);rightArr.push(cur + i);}// 凑页码pageNum = leftArr.concat(cur, rightArr);pageNum.push('...', total);pageNum.unshift(1, '...');}}return pageNum;}

效果

    // 页码多于totalvar total = 9;var cur = 1;var pagesLen = 15;console.log(pageView(total, cur, pagesLen)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]// 当前页码靠近首页total = 100;cur = 1;pagesLen = 15;console.log(pageView(total, cur, pagesLen)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, "...", 100]// 当前页码靠近尾页total = 100;cur = 99;pagesLen = 15;console.log(pageView(total, cur, pagesLen)); // [1, "...", 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]// 当前页码靠中间total = 100;cur = 50;pagesLen = 15;console.log(pageView(total, cur, pagesLen)); // [1, "...", 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, "...", 100]

快速实现-简单分页器(上)相关推荐

使用Python和OpenCV实现超快速，简单的伽玛校正功能
使用Python和OpenCV实现超快速,简单的伽玛校正功能 1. 效果图 2. 什么是伽玛校正? 3. 源码参考这篇博客将介绍伽马校正(也称为幂律变换)是什么,并将演示如何使用Python和Op ...
JAVA5000行代码什么概念_GitHub - catstiger/mvc: 一个不超过5000行代码的，快速，简单，易用的MVC框架。...
一个不超过5000行代码的,快速,简单,易用的MVC框架. 我们的目的是: 让MVC回归其最初的目的. 因简单而快速,超过目前各种主流MVC. 零侵入,零配置,易于测试,并且让开发者感觉不到MVC的存 ...
EpiQuik病毒RNA提取试剂盒，快速、简单、经济有效
基于柱和磁珠的方法为从临床标本中提取病毒 RNA 基因组提供了一种快速方便的方法.Epigentek的各种用于分离RNA的磁珠和离心柱试剂盒来自不同样本来源(细胞.组织.全血.唾液.鼻咽拭子)和物种( ...
新手坐高铁怎么找车厢_坐高铁时如何快速找到自己车票上的车厢和座位! 说出来你都不敢相信...
现在我国大力在发展高铁行业.慢慢的以前的绿皮火车由于速度缓慢,乘坐环境较差就被高铁所挤下去了,人们越来越愿意乘坐高铁出行.毕竟高铁速度上是火车的数倍,而且环境也非常好.但是大家坐高铁什么的时候是不是都 ...
Java虚拟机知识点快速复习手册（上）
前言本文快速回顾了常考的的知识点,用作面试复习,事半功倍. 上篇主要内容为:虚拟机数据区域,垃圾回收下篇主要内容为:类加载机制面试知识点复习手册全复习手册文章导航 Csdn全复习手册文章导航: ...
会声会影2022试用版智能、快速、简单的视频剪辑软件
会声会影2022-智能.快速.简单的视频剪辑软件,会声会影的灵活性和易用性成就与众不同的视频剪辑体验, 备受高级用户和入门级用户的青睐. 会声会影让您享受丰富的视频剪辑功能,帮助您轻松创建您想要的影片 ...
赛效：快速、简单的在线修改图片工具怎么用
在日常生活中,我们经常需要对图片进行修改,以使它们更加美观或符合需求.但是,许多人并不知道如何使用在线修改图片工具,或者不知道如何选择合适的工具来完成修图工作.下面,我们就来介绍一下如何使用快速.简单 ...
利用Wireshark和OSS的API文档简单实现上传和下载
背景及目的由于各个开发者使用的开发语言可能在官方SDK找不到相应的语言版本,就必须自主开发SDK. 本文根据wireshark和API文档,来简单实现上传和下载的请求,给需要自主开发的开发者提供一个 ...
linux只有上传文件到站点,史上最简单的上传文件到linux系统方法
史上最简单的上传文件到linux系统方法工具/原料 linux,windows filezilla 方法/步骤 1 下载 Filezilla client工具,此客户端为免费软件,下载完成后安装,安 ...

快速实现-简单分页器(上)

快速实现-简单分页器(上)相关推荐

最新文章

热门文章