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 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
javascript对象3个属性特征
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
Destoon实现多表查询示例
2014/08/21 PHP
php实现插入排序
2015/03/29 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
DOM相关内容速查手册
2007/02/07 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
初步理解Python进程的信号通讯
2015/04/09 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
python进阶之自定义可迭代的类
2019/08/20 Python
Python面向对象之Web静态服务器
2019/09/03 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
python判断是空的实例分享
2020/07/06 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
盗窃案辩护词
2015/05/21 职场文书
详解Spring事件发布与监听机制
2021/06/30 Java/Android