yourself_javascript 기술로 작성한 간단한 자바스크립트 페이징 구성 요소를 공유하세요

직접 작성한 간단한 페이징 컴포넌트입니다. 주요 기능과 구현은 모두 JS에 있습니다. HTML 페이지에서는 페이징을 생성하고 컨테이너 ID를 제공하기 위한 DIV만 추가하면 됩니다.

html 구조는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

<ul class="pagination" id="pageDIV">

class="pagination"은 페이지 매기기 스타일을 제공합니다.
id="pageDIV"는 JS에서 생성된 페이지 매김을 배치하는 데 사용됩니다

CSS 구조는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

.페이지 매김{
여백 상단: 10px;
​ 여백-하단: 10px;
디스플레이: 인라인 블록;
왼쪽 패딩: 0;
여백: 20px 0;
테두리 반경: 4px;
}
.페이지 매김>li {
디스플레이: 인라인;
}
.pagination>li:first-child>a{
​ 여백-왼쪽: 0;
테두리-왼쪽 상단 반경: 4px;
테두리 하단 왼쪽 반경: 4px;
}
.페이지 매김>li>a{
위치: 친척;
부동: 왼쪽;
패딩: 6px 12px;
​ 여백-왼쪽: -1px;
줄 높이: 1.42857143;
색상: #337ab7;
텍스트 장식: 없음;
배경색: #fff;
테두리: 1px 단색 #ddd;
커서: 포인터;
}
.pagination>li>a.navcur{
배경: #cccccc;
색상: #ffffff;
}

다음은 JS 구조입니다. JQuery를 꼭 인용하세요

코드 복사 코드는 다음과 같습니다.

/**
* @pageContentID는 페이지가 매겨진 DIV 요소를 렌더링합니다
* @curPage 현재 시작 페이지
* @totalCount 총 수량
* @pageRows 각 페이지에 표시되는 번호
* 데이터 표시를 위한 @callback 콜백 함수
​*/
함수 PageList(pageContentID,option){
    this.pageContentID=document.getElementById(pageContentID);
    this.curPage=option.curPage;
    this.totalCount=option.totalCount;
    this.pageRows=option.pageRows;
    this.callback=option.callback;
    this.pageSize=Math.ceil(this.totalCount/this.pageRows);
}
PageList.prototype={
    초기화:함수(){
        this.renderbtn();
    },
    첫 번째 페이지:함수(){
        var _self=this;
        _self._firstpage=document.createElement("li");
        _self._firstpageA=document.createElement("a");
        _self._firstpageA.innerHTML="首页";
        _self._firstpage.appendChild(_self._firstpageA);
        this.pageContentID.appendChild(_self._firstpage);
        _self._firstpage.onclick=function(){
            _self.gotopage(1);
        }
    },
    마지막 페이지: 함수 () {
      var _self=this;
        _self._lastpage=document.createElement("li");
        _self._lastpageA=document.createElement("a");
        _self._lastpageA.innerHTML="尾页";
        _self._lastpage.appendChild(_self._lastpageA);
        this.pageContentID.appendChild(_self._lastpage);
        _self._lastpage.onclick= 함수() {
            _self.gotopage(_self.pageSize);
        }
    },
    prewpage: 함수 () {
        var _self=this;
        _self._prew=document.createElement("li");
        _self._prewA=document.createElement("a");
        _self._prewA.innerHTML="<<";
        _self._prew.appendChild(_self._prewA);
        this.pageContentID.appendChild(_self._prew);
        _self._prew.onclick= 함수() {
            if(_self.curPage>1){
                _self.curPage--;
            }
            _self.callback.call(this,this.curPage);
            _self.init();
            console.log(_self.curPage);
        }
    },
    다음 페이지: 함수 () {
        var _self=this;
        _self._next=document.createElement("li");
        _self._nextA=document.createElement("a");
        _self._nextA.innerHTML=">>";
        _self._next.appendChild(_self._nextA);
        this.pageContentID.appendChild(_self._next);
        _self._next.onclick= 함수() {
            if(_self.curPage<_self.pageSize){
                _self.cur페이지 ;
            }
            _self.callback.call(this,this.curPage);
            _self.init();
            console.log(_self.curPage);
        }
    },
    페이지 번호: 함수 () {
        var _self=this;
        if(this.pageSize<=10){
            for(var i= 1,len=this.pageSize;i<=len;i ){
                _self._num=document.createElement("li");
                _self._numA=document.createElement("a");
                _self._numA.innerHTML=i;
                _self._num.appendChild(_self._numA);
                this.pageContentID.appendChild(_self._num);
                _self._num.onclick= 함수() {
                    var curpage = $(this).text();
                    _self.gotopage(curpage);
                }
            }
        }
        그렇지 않으면{
            if(_self.curPage<=10){
                for(var i= 1;i<=10;i ){
                    _self._num=document.createElement("li");
                    _self._numA=document.createElement("a");
                    _self._numA.innerHTML=i;
                    _self._num.appendChild(_self._numA);
                    this.pageContentID.appendChild(_self._num);
                    _self._num.onclick= 함수() {
                        var curpage = $(this).text();
                        _self.gotopage(curpage);
                    }
                }
            }
            else if(_self.curPage>10&&_self.curPage<=this.pageSize){
                if(this.pageSize<Math.ceil(_self.curPage/10)*10){
                    for(var i=Math.floor(_self.curPage/10)*10 1;i<=this.pageSize;i ){
                        if(_self.curPage>this.pageSize)
                        반품;
                        _self._num=document.createElement("li");
                        _self._numA=document.createElement("a");
                        _self._numA.innerHTML=i;
                        _self._num.appendChild(_self._numA);
                        this.pageContentID.appendChild(_self._num);
                        _self._num.onclick= 함수() {
                            var curpage = $(this).text();
                            _self.gotopage(curpage);
                        }
                    }
                }그밖에{
                    if(Math.ceil(_self.curPage/10)*10==_self.curPage){
                        for(var i=_self.curPage-9;i<=_self.curPage;i ){
                            _self._num=document.createElement("li");
                            _self._numA=document.createElement("a");
                            _self._numA.innerHTML=i;
                            _self._num.appendChild(_self._numA);
                            this.pageContentID.appendChild(_self._num);
                            _self._num.onclick= 함수() {
                                var curpage = $(this).text();
                                _self.gotopage(curpage);
                            }
                        }
                    }그밖에{
                        for(var i=Math.floor(_self.curPage/10)*10 1;i<=Math.ceil(_self.curPage/10)*10;i ){
                            _self._num=document.createElement("li");
                            _self._numA=document.createElement("a");
                            _self._numA.innerHTML=i;
                            _self._num.appendChild(_self._numA);
                            this.pageContentID.appendChild(_self._num);
                            _self._num.onclick= 함수() {
                                var curpage = $(this).text();
                                _self.gotopage(curpage);
                            }
                        }
                    }
                }
            }
        }
        $(".pagination li").each(function(){
            if($(this)[0].innerText==_self.curPage){
                $(".pagination li").children("a").removeClass("navcur");
                $(this).children("a").addClass("navcur");
            }
        });
    },
    gotopage: 함수(커페이지) {
        this.curPage=curpage;
        this.callback.call(this,this.curPage);
        this.init();
        console.log(this.curPage);
    },
    renderbtn: 함수 () {
        $(".pagination").html("");
        this.firstpage();
        this.prewpage();
        this.pagenum();
        this.nextpage();
        this.lastpage();
    }
};
$(함수(){
    var pager = new PageList("pageDIV",{
        현재페이지:1,
        총 개수:26,
        페이지행:1,
        콜백:callbackFuc
    });
    pager.init();
});
함수 callbackFuc(curpage){
}

설명:

사용 방법:

复主代码 代码如下:

$(함수(){

    var pager = new PageList("pageDIV",{
        현재페이지:1,
        총 개수:26,
        페이지행:1,
        콜백:callbackFuc
    });
    pager.init();
});

以上就是本分页组件的核心代码了，希望小伙伴们能够喜欢。