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

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

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

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

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                     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();
});

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