首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > js教程

原生js实现可以带上下翻页的翻页功能（代码）

不言
不言 原创
2018-08-15 16:13:43 6048浏览

本篇文章给大家带来的内容是关于原生js实现可以带上下翻页的翻页功能（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

翻页功能在渲染数据时经常用到，下面是使用原生JS去实现的一个翻页功能，带上下翻页功能，效果图如下：

主要步骤/思路：

  1. 实现页面效果；

  2. 点击页码时，根据情况判断，控制翻页变化，有以下几种情况：

（a）.总页数 > 限制页数 =》有10页，限制每次只显示5页

（a）.总页数 = 限制页数 =》只返回1页，显示每次只显示5页

（a）.总页数 < 限制页数 =》返回的总页数和每次显示的页数是相同的

3. 上下翻页功能，根据翻页情况，第一页和最后一页时，应该移除翻页的功能等；

页面效果实现：

html

<div class="pagination">
    <a href="javascript:;"  class="page-pre">上一页</a>
    <ul></ul>
    <a href="javascript:;" class="page-next">下一页</a>
</div>

css

/** 分页 */
.pagination{
    display: inline-block;
}
.pagination>ul{
    padding: 0;
    margin: 0;
    display: inline-block;
    border: 1px solid #e2e2e2;
}
.pagination>ul>li{
    float: left;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #e2e2e2;
}
.pagination>ul>li:first-child{
    background-color: rgb(30, 159, 255);
}
.pagination>ul>li:last-child{
    border-right-width: 0px;
}
.pagination>ul>li>a{
    display: inline-block;
    width: 38px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #333;
}
.pagination>ul>li>a:hover{
    opacity: 0.7;
}
.pagination>a{
    display: inline-block;
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #333; 
    border: 1px solid #e2e2e2;
}
.pagination a.page-pre{
    margin-right: -1px;
    float: left;
    color: #d2d2d2;
    cursor: not-allowed;
    border-right-width: 0px;    
}
.pagination a.page-next{
    float: right;
    border-left-width: 0px;
}
/* 分页 end **/

实现翻页效果

var pagination = function (o){
    /**
     * 翻页会出现的情况：
     * 总页数 > 限制页数  30 > 10 
     * 总页数 < 限制页数  5 < 10
     * 总页数 = 限制页数  10 = 10
     * @var pnCount - 显示多少页码 =>  限制显示页码 < 页码总数 （按限制显示） ： 限制显示页码 > 页码总数 （按页码总数显示）
     * @var midN - 翻页的中间页码位置
     * 
    */
    var config = {
        count: o.count || 10,
        limit: o.limit || 5, //每页显示的条数
    };
    var count = config.count,
        limit = config.limit,
        eUl = dorea(".pagination ul")[0],
        ePre = dorea(".pagination .page-pre")[0],
        eNext = dorea(".pagination .page-next")[0],
        eUlChild = eUl.children,
        pnCount = limit < count ? pnCount = limit : pnCount = count,
        midN = Math.ceil( pnCount / 2 );
    /* 初始化上下翻页的页码 */
    ePre.setAttribute("data-page","1");
    eNext.setAttribute("data-page","1");  
    
    /* 
        * @func renderPag
        * @desc 渲染分页  
        * @param { string } startN - 页码起始数  
        * @param { string } currP - 当前页数 ，初始化该函数时可不传  
        * @var childLen - 所有的子元素（页码）的长度 
    */
    var renderPag = function (startN,currP){
        var childLen = eUlChild.length;
        /* 渲染前先清空所有页码 */
        for ( var d = childLen-1; d>=0; d-- ) {
            eUlChild[d].parentNode.removeChild(eUlChild[d]);
        }
        /* 渲染页码 */
        for ( var i = startN; i <pnCount+startN; i++ ) {
            var eLi = creatEle("li"),
                eA = creatEle("a");
            eA.innerHTML = i;
            eA.setAttribute("href","javascript:;");
            eLi.setAttribute("data-page",i);
            eLi.appendChild(eA);
            eUl.appendChild(eLi);

            /* 添加页码的点击事件，获取当前页码currPage */
            eLi.addEventListener("click",function (){
                var currPage = this.getAttribute("data-page");
                turnPag(currPage);
                ePre.setAttribute("data-page",currPage);
                eNext.setAttribute("data-page",currPage);
            }); 
        }
        /* 每次重新渲染翻页时，判断当前页情况（是否属于首页和尾页） */
        if (currP!==undefined) {
            if (currP=="1") {
                ePre.style.color = "#d2d2d2";
                ePre.style.cursor = "not-allowed";
                ePre.removeEventListener("click",preFn,false);
            }else if(currP==count){
                eNext.style.color = "#d2d2d2";
                eNext.style.cursor = "not-allowed";
                eNext.removeEventListener("click",nextFn,false);
            }else{
                ePre.style.color = "#333";
                ePre.style.cursor = "pointer";
                eNext.style.color = "#333";
                eNext.style.cursor = "pointer";
                ePre.addEventListener("click",preFn,false); 
                eNext.addEventListener("click",nextFn,false);
            } 
        }
    };
    /**
     * @func turnPag
     * @desc 翻页事件判断，主要用于点击事件发生后，进行页码渲染前的判断
     * @param { string } cp - 传入一个点击所获得的当前页数
     * 情况：1) count > limit
     *          a). limit的前半部分页码，例如 10,5 ，前半部分是 1,2 => 起始页为 1
     *          b). limit的后半部分页码，例如 10,5 ，后半部分是 9,10 => 起始页为 (count-limit)+1
     *          b). limit的中间部分，例如 10,5 ，中间部分是 4-7 => 起始页为 (当前页 - (limit/2))+1
     * 情况：2) count = limit => 起始页为 1
     * 情况：3) count < limit => 限制10条，但真实数据确只有5条
     *          a). 发生这类情况，限制条数应以总数据条数为准则
     * 
    */
    var turnPag = function (cp){
        console.log("当前第 "+cp+" 页");
        if (count>limit) {
            if ( cp<=midN ) { //判断是否属于前部分
                renderPag(1,cp);
            }else if( cp<=count && cp>count - midN ){ //判断是否属于后部分
                renderPag( (count - limit)+1 ,cp) ;
            }else{
                renderPag( (cp-midN)+1 ,cp);
            }
        }else if (count===limit || count<limit) {
            renderPag(1);
        }else{
            renderPag( (count - midN)-1 ,cp);
        }
        
        for (var i = 0; i<eUlChild.length; i++) {
            eUlChild[i].style.backgroundColor = "#fff";
            if (eUlChild[i].getAttribute("data-page") == cp) {
                eUlChild[i].style.backgroundColor = "#1E9FFF"; /* 选中状态 */
            }
        } 
    };
    /**
     * @func preFn 
     * @desc 上翻页
     * @func nextFn 
     * @desc 下翻页
     */
    var preFn = function (){
        var currPage = this.getAttribute("data-page");
        currPage--;
        turnPag(currPage);
        ePre.setAttribute("data-page",currPage);
        eNext.setAttribute("data-page",currPage);
    };
    var nextFn = function (){
        var currPage = this.getAttribute("data-page");                    
        currPage++;
        turnPag(currPage);
        ePre.setAttribute("data-page",currPage);
        eNext.setAttribute("data-page",currPage);
    };
    renderPag(1);

    /* 
        * 初次渲染翻页时，判断当前的总页数情况，初始化翻页功能
        * 情况： 1) count > limit 上翻页：暗色，删除事件 - 下翻页：亮色，点击事件
        * 情况： 2) count = limit 上下翻页：暗色，删除事件
        * 情况： 3) count < limit 上下翻页：暗色，删除事件
    */
    if (count>limit) {
        ePre.style.color = "#d2d2d2";   
        ePre.style.cursor = "not-allowed";
        ePre.removeEventListener("click",preFn,false);
        eNext.addEventListener("click",nextFn,false);
    }else{
        ePre.style.color = "#d2d2d2";
        ePre.style.cursor = "not-allowed";
        ePre.removeEventListener("click",preFn,false);
        eNext.style.color = "#d2d2d2";
        eNext.style.cursor = "not-allowed";
        eNext.removeEventListener("click",nextFn,false);
    }
}

相关推荐：

原生JS如何实现翻页功能

js 拖拽翻页实现代码_javascript技巧

Js实现网页键盘控制翻页的方法_javascript技巧

以上就是原生js实现可以带上下翻页的翻页功能（代码）的详细内容，更多请关注php中文网其它相关文章！

原生JS翻页 上下翻页原生JSPHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一条：js中类型检测的四种方法介绍（代码） 下一条：js中如何解决网页的编码以及解码？js解决网页编码和解码的方法

相关文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！