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 在网页中的运用(asp.net)
Nov 23 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
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
DedeCms模板安装/制作概述
2007/03/11 PHP
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python 编码规范整理
2018/05/05 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python super的使用方法及实例详解
2019/09/25 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
父亲生日宴会答谢词
2014/01/10 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
办理收楼委托书范本
2014/10/09 职场文书
2015年人事科工作总结
2015/04/28 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers