自分自身で作成した単純な JavaScript ページング コンポーネントを共有する_JavaScript スキル

私が書いた単純なページング コンポーネント。主要な関数と実装はすべて JS で行われます。HTML ページでは、ページングを生成し、コンテナーの ID を指定するための DIV を追加するだけです。

HTML 構造は次のとおりです:

コードをコピーします コードは次のとおりです:

class="pagination" はページネーションのスタイルを指定します。
id="pageDIV" は、JS によって生成されたページネーションを配置するために使用されます

CSS 構造は次のとおりです:

コードをコピーします コードは次のとおりです:

.ページネーション{
マージン上部: 10px;
margin-bottom: 10px;
表示: inline-block;
パディング左: 0;
マージン: 20px 0;
境界線の半径: 4px;
}
.pagination>li {
表示: インライン;
}
.pagination>li:first-child>a{
マージン左: 0;
境界線の左上の半径: 4px;
境界線の左下半径: 4px;
}
.pagination>li>a{
位置: 相対;
float: 左;
パディング: 6px 12px;
マージン左: -1px;
行の高さ: 1.42857143;
色: #337ab7;
テキスト装飾: なし;
背景色: #fff;
枠線: 1 ピクセルの実線 #ddd;
カーソル: ポインタ;
}
.pagination>li>a.navcur{
背景: #cccccc;
色: #ffffff;
}

以下は JS 構造です。必ず JQuery を引用してください

コードをコピー コードは次のとおりです:

/**
* @pageContentID はページ分割された DIV 要素
をレンダリングします * @curPage 現在のスタート ページ
* @totalCount 合計数​​量
* @pageRows 各ページに表示される番号
* @callback データ表示用コールバック関数
​*/
function 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={
    init:function(){
        this.renderbtn();
    }、
    firstpage:function(){
        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);
        }
    }、
    lastpage: function () {
      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= function () {
            _self.gotopage(_self.pageSize);
        }
    }、
    prewpage: function () {
        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);
        }
    }、
    nextpage: function () {
        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.curPage ;
            }
            _self.callback.call(this,this.curPage);
            _self.init();
            console.log(_self.curPage);
        }
    }、
    ページ番号: function () {
        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._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: 関数 (curpage) {
        this.curPage=curpage;
        this.callback.call(this,this.curPage);
        this.init();
        console.log(this.curPage);
    }、
    renderbtn: function () {
        $(".pagination").html("");
        this.firstpage();
        this.prewpage();
        this.pagenum();
        this.nextpage();
        this.lastpage();
    }
};
$(関数(){
    var pager = new PageList("pageDIV",{
        curPage:1、
        合計数:26、
        ページ行:1、
        コールバック:callbackFuc
    });
    pager.init();
});
関数 callbackFuc(curpage){
}

说明:

この分は 10 が標準で、10 より低い場合はすべて表示され、10 より大きい場合は残りの下数が表示されます。

使用方法:

复制代 代码如下:

$(関数(){
    var pager = new PageList("pageDIV",{
        curPage:1、
        合計数:26、
        ページ行:1、
        コールバック:callbackFuc
    });
    pager.init();
});

以上はこのコンテンツの核心コードであり、小さなパートナーが喜んでくれることが望ましいです。