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 相关文章推荐
JavaScript 图片预览效果 推荐
Dec 22 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
PHPCMS的使用小结
2010/09/20 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
用Python进行TCP网络编程的教程
2015/04/29 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
销售高级职员求职信
2013/10/29 职场文书
工作会议欢迎词
2014/01/16 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
Python sklearn分类决策树方法详解
2022/09/23 Python