Kongsi komponen halaman javascript mudah yang ditulis oleh kemahiran yourself_javascript

Komponen paging mudah yang ditulis oleh saya sendiri Fungsi utama dan pelaksanaan semuanya dalam JS Dalam halaman html, anda hanya perlu menambah DIV untuk menjana paging dan memberikan id bekas.

Struktur html adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

class="pagination" memberikan gaya penomboran,
id="pageDIV" digunakan untuk meletakkan penomboran yang dijana oleh JS

Struktur CSS adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

.penomboran{
jidar atas: 10px;
jidar bawah: 10px;
Paparan: blok sebaris;
padding-left: 0;
Jidar: 20px 0;
Jejari sempadan: 4px;
}
.penomboran>li {
Paparan: sebaris;
}
.penomboran>li:anak pertama>a{
jidar-kiri: 0;
Jejari sempadan-atas-kiri: 4px;
Jejari-kiri-bawah-bawah: 4px;
}
.penomboran>li>a{
Jawatan: relatif;
terapung: kiri;
Padding: 6px 12px;
jidar-kiri: -1px;
Ketinggian garisan: 1.42857143;
Warna: #337ab7;
hiasan teks: tiada;
Warna latar belakang: #fff;
Sempadan: 1px pepejal #ddd;
Kursor: penunjuk;
}
.penomboran>li>a.navcur{
latar belakang: #cccccc;
Warna: #ffffff;
}

Berikut ialah struktur JS, pastikan anda memetik JQuery

Salin kod Kod adalah seperti berikut:

/**
* @pageContentID memaparkan elemen DIV bernombor
* @curPage halaman permulaan semasa
* @totalCount jumlah kuantiti
* Nombor @pageRows dipaparkan pada setiap halaman
* Fungsi panggil balik @callback untuk memaparkan data
,*/
fungsi 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();
    },
    halaman pertama:fungsi(){
        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);
        }
    },
    halaman terakhir: fungsi () {
      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: fungsi () {
        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= function () {
            if(_self.curPage>1){
                _self.curPage--;
            }
            _self.callback.call(this,this.curPage);
            _self.init();
            console.log(_self.curPage);
        }
    },
    halaman sebelah: fungsi () {
        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= function () {
            if(_self.curPage<_self.pageSize){
                _self.curPage ;
            }
            _self.callback.call(this,this.curPage);
            _self.init();
            console.log(_self.curPage);
        }
    },
    pagenum: fungsi () {
        var _self=this;
        if(this.pageSize<=10){
            untuk(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= function () {
                    var curpage = $(this).text();
                    _self.gotopage(curpage);
                }
            }
        }
        lain{
            if(_self.curPage<=10){
                untuk(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= function () {
                        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)
                        kembali;
                        _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= function () {
                            var curpage = $(this).text();
                            _self.gotopage(curpage);
                        }
                    }
                }lain{
                    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= function () {
                                var curpage = $(this).text();
                                _self.gotopage(curpage);
                            }
                        }
                    }lain{
                        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= function () {
                                var curpage = $(this).text();
                                _self.gotopage(curpage);
                            }
                        }
                    }
                }
            }
        }
        $(".penomboran li").setiap(fungsi(){
            if($(this)[0].innerText==_self.curPage){
                $(".penomboran li").kanak-kanak("a").removeClass("navcur");
                $(this).children("a").addClass("navcur");
            }
        });
    },
    gotopage: fungsi (curpage) {
        this.curPage=curpage;
        this.callback.call(this,this.curPage);
        this.init();
        console.log(this.curPage);
    },
    renderbtn: fungsi () {
        $(".penomboran").html("");
        this.firstpage();
        this.prewpage();
        this.pagenum();
        this.nextpage();
        this.lastpage();
    }
};
$(fungsi(){
    var pager = new PageList("pageDIV",{
        curPage:1,
        jumlahBilangan:26,
        pageRows:1,
        panggil balik:callbackFuc
    });
    pager.init();
});
fungsi callbackFuc(curpage){
}

说明:

此分页是以10页为标准,低于10页的时候全部显示,大于10页的时候,进行百示題.

调用方法:

复制代码 代码如下:

$(fungsi(){
    var pager = new PageList("pageDIV",{
        curPage:1,
        jumlahBilangan:26,
        pageRows:1,
        panggil balik:callbackFuc
    });
    pager.init();
});

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