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 相关文章推荐
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
js+css实现扇形导航效果
Aug 18 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
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
用js实现放大镜效果
2020/10/28 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
使用Python的turtle模块画国旗
2019/09/24 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
Django实现内容缓存实例方法
2020/06/30 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
python中封包建立过程实例
2021/02/18 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
学生实习推荐信范文
2013/11/26 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers