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 解析url的search方法
Feb 09 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 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
apache mysql php 源码编译使用方法
2012/05/03 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
JavaScript Split()方法
2015/12/18 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
vue router demo详解
2017/10/13 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
Python 多维List创建的问题小结
2019/01/18 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
名人演讲稿范文
2013/12/28 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
六个一活动实施方案
2014/03/21 职场文书
体育专业求职信
2014/07/16 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
小学优秀教师材料
2014/12/15 职场文书
体育教师个人工作总结
2015/02/09 职场文书
网站文案策划岗位职责
2015/04/14 职场文书