JavaScript分页组件使用方法详解


Posted in Javascript onJuly 26, 2021

分页组件是web开发中常见的组件,请完成pagination函数,在id为jsPagination的DOM元素中完成分页的显示部分,需求如下

1、最多连续显示5页,居中高亮显示current页(如demo1所示)
2、total为0时,隐藏整个元素(如demo2所示)
3、如果total<=5,则显示全部页数,隐藏“首页”和“末页”元素(如demo3所示)
4、当current居中不足5页,向后(前)补足5页,隐藏“首页”(“末页”)元素(如demo4和demo5所示)
5、total、current均为正整数,1 <= current <= total

JavaScript分页组件使用方法详解

用原生JS实现分页组件,实现上述需求。需要注意下面几点

1:在获取<li>标签的时候,由于上一个<li>标签与下一个<li>标签之前存在文本节点,需要两次使用nextSibling,

page = page.nextSibling.nextSibling;

2:提供的<li>标签的innerHTML为‘',需要在其中添加页码,根据需求中的五种情况写

3:特别注意首页、末页的隐藏情况。当current-2<=1 时隐藏首页,当current+2.>=total隐藏末页,需要隐藏首页、末页存在于上述demo1、demo3、demo4、demo5。(其中demo1 首页、末页的隐藏很容易被忽略掉!)

HTML

<ul class="pagination" id="jsPagination">
    <li>首页</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>末页</li>
</ul>

css

.hide{
    display: none!important;
}
.pagination{
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: center;
}
.pagination li{
    display: inline-block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    line-height: 30px;
    margin: 0 5px 0 0;
    font-size: 14px;
    text-align: center;
    border: 1px solid #00bc9b;
    color: #00bc9b;
    cursor: pointer;
}
.pagination li.current,
.pagination li:hover{
    background: #00bc9b;
    color: #ffffff;
}
.demo {
    margin: 10px 0;
    padding: 10px;
    background: #eeeeee;
    text-align: center;
}

JavaScript

function pagination(total, current) {
        var ele=document.getElementById('jsPagination');
        //for demo1
        if(current-2>=1&¤t+2<=total)
        {
            var page=ele.firstChild.nextSibling;
            if(current-2==1)
                page.className='hide';
            for(var i=current-2,p=current-2;i<=current+2;p++,i++)
            {
                page=page.nextSibling;
                console.log(page);
                page=page.nextSibling;
                console.log(page);
                page.innerHTML=i;
                if(i==current)
                    page.className='current';
            }
            if(current+2==total)
            {
                var last=page.nextSibling.nextSibling;
                last.className='hide';
            }
        }
        //for demo2
        else if(total==0)
        {
            ele.className='pagination hide';
        }
        //for demo3
        else if(total<=5)
        {
            var fir=ele.firstChild.nextSibling;
            fir.className='hide';
            var page=fir;
            for(var i=1;i<=5;i++) {
                page = page.nextSibling.nextSibling;
                if (i <= total) {
                    page.innerHTML=i;
                    if(i==current)
                        page.className='current';
                }
                else
                {
                    page.className='hide';
                }
 
            }
            var last=page.nextSibling.nextSibling;
            last.className='hide';
        }
        //for demo4
        else if(current-2<=0)
        {
            var page=ele.firstChild.nextSibling;
            page.className='hide';
            for(var i=1;i<=5;i++) {
                page = page.nextSibling.nextSibling;
                page.innerHTML=i;
                    if(i==current)
                        page.className='current';
            }
 
        }
        //for demo5
        else if(current+2>total)
        {
            var page=ele.firstChild.nextSibling;
            for(var i=total-4;i<=total;i++) {
                page = page.nextSibling.nextSibling;
                page.innerHTML=i;
                if(i==current)
                    page.className='current';
            }
            var last=page.nextSibling.nextSibling;
            last.className='hide';
 
        }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
js实现简单的随机点名器
Sep 17 Javascript
webpack的移动端适配方案小结
Jul 25 #Javascript
Vue3.0 手写放大镜效果
ElementUI实现el-form表单重置功能按钮
vue项目多环境配置(.env)的实现
Node与Python 双向通信的实现代码
Jul 16 #Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 #Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 #Javascript
You might like
php木马攻击防御之道
2008/03/24 PHP
PHP微商城开源代码实例
2019/03/27 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python 换位密码算法的实例详解
2017/07/19 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
python selenium 弹出框处理的实现
2019/02/26 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
python进度条显示之tqmd模块
2020/08/22 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
What is view? why do we have view?
2012/06/22 面试题
如何开发一个JQuery插件
2016/07/28 面试题
小学生新学期寄语
2014/01/19 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB