js를 사용하여 간단한 페이징 기능을 구현하는 방법은 무엇입니까? (코드 예)

페이징 기능은 기본적으로 홈페이지 구축에 꼭 필요한 기능입니다. 그렇다면 js를 사용하여 간단한 페이징 기능을 구현하는 방법은 무엇입니까? 초보자나 경험이 없는 프로그래머에게는 js 페이징 기능 구현에 대한 이 기사의 소개가 도움이 될 수 있습니다.

js 단순 페이징 구현을 위한 코드 예시는 다음과 같습니다.

1.HTML 코드:

<div class=" " id="pagecontrol"> 
                                <ul>
                                    <li><span id="prepage">上一页</span></li>
                                    <li class="num current"><a>1</a></li>
                                    <li class="num"><a>2</a></li>
                                    <li class="num"><a>3</a></li>
                                    <li class="num"><a>4</a></li>
                                    <li class="num"><a>5</a></li>
                                    <li><span id="nextpage">下一页<span></li>
                                </ul>
                            </div>

2.js 코드:

$(function(){
        var curpage=1;//当前页码
        var maxpage = 10;//最大页码
        
        if(maxpage > 1)
            $("#nextpage").addClass("active");
        
        $("#rowsToshow").change(function(){
            console.log($("#rowsToshow").val());
        })
        $("#prepage").live("click",function(){
            curpage = curpage - 1;
            pageshow(curpage,maxpage);
        })
        $("#nextpage").live("click",function(){
            curpage = curpage + 1;
            pageshow(curpage,maxpage);
        })
        $("#pagecontrol li a").live("click",function(){
            curpage = Number($(this).text());
            pageshow(curpage,maxpage);
        })
    })
    
    function pageshow(cp,tp){
        
        var sp = cp - 2;//startpage
        var ep = cp + 2;//endpage
        var eoff = ep - tp;//tp:totalpage
        if(eoff>0){
                sp = sp - eoff;
        }
        if(sp<=0){
            ep = ep -sp + 1;
        }
        var str = &#39;&#39;;
        if(cp != 1)
            str = str + &#39;<ul><li><span id="prepage" class="active">上一页</span></li>&#39;
        else
            str = str + &#39;<ul><li><span id="prepage">上一页</span></li>&#39;
        for(var i= sp;i<=ep;i++){
            if(i>0&& i<=tp){
                if(i == cp)
                    str = str + &#39;<li class="num current"><a>&#39;+i+&#39;</a></li>&#39;;
                else
                    str = str + &#39;<li class="num"><a>&#39;+i+&#39;</a></li>&#39;;
            }
        }
        
        if(cp != tp)
            str = str + &#39;<li><span class="active" id="nextpage">下一页<span></li></ul>&#39;;
        else
            str = str + &#39;<li><span id="nextpage">下一页<span></li></ul>&#39;;
        $("#pagecontrol").html(str);
    }

【관련 기사 추천】

php to 페이징 효과 달성 예시

PHP를 사용하여 목록 페이징 기능 구현하는 방법

PHP를 사용하여 간단한 페이징 클래스 구현 및 자세한 사용법

javascript로 페이징 기능 구현

위 내용은 js를 사용하여 간단한 페이징 기능을 구현하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!