Native js는 페이지를 위아래로 넘길 수 있는 페이지 넘김 기능을 구현합니다(코드)

이 글의 내용은 페이지를 넘기거나 내릴 수 있는 페이지 넘김 기능(코드)의 네이티브 js 구현에 관한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다. .

페이지 넘기기 기능은 데이터를 렌더링할 때 자주 사용됩니다. 다음은 페이지 넘기기 기능을 기본 JS로 구현한 것입니다. 렌더링은 다음과 같습니다.

주요 단계/아이디어:

1. 페이지 효과 실현

2. 페이지 번호를 클릭하면 상황에 따라 판단되어 페이지 넘김 변경을 제어합니다.

(a). 페이지 수 > 제한 페이지 수 => 10페이지입니다. 한 번에 5페이지만 표시됩니다.

(a).총 페이지 수 = 제한된 페이지 수 =》1페이지만 반환됩니다. 5페이지만 반환됩니다. 페이지는 한 번에 표시됩니다

(a).총 페이지 수 < 제한 페이지 수 =》Return 총 페이지 수와 매번 표시되는 페이지 수는 동일합니다

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 드래그 앤 드롭 페이지 넘기기 구현 code_javascript 기술

웹 페이지 키보드 제어를 구현하는 Js 방법 페이지 넘기기_javascript 기술

위 내용은 Native js는 페이지를 위아래로 넘길 수 있는 페이지 넘김 기능을 구현합니다(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!