分享一個自己寫的簡單的javascript分頁元件_javascript技巧

自己寫的一個簡單的分頁組件,主要功能還有實現都在JS中,html頁面中只用增加一個放置生成分頁的DIV,並給定容器的id.

html結構如下:

複製程式碼 程式碼如下:

class="pagination" 給定了分頁的樣式,
id="pageDIV"用來放置JS產生的分頁

CSS架構如下:

複製程式碼 程式碼如下:

.pagination{
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination>li {
    display: inline;
}
.pagination>li:first-child>a{
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.pagination>li>a{
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    cursor: pointer;
}
.pagination>li>a.navcur{
    background: #cccccc;
    color: #ffffff;
}

下面是JS結構,注意要引用JQuery

複製程式碼 程式碼如下:

/**
 * @pageContentID 渲染分頁的DIV元素
 * @curPage 目前開始頁面
 * @totalCount 總數量
 * @pageRows 每頁顯示數量
 * @callback 顯示資料的回呼函數
 */
函數PageList(pageContentID, 選項){
    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=這個;
        _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=這個;
        _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);
        }
    },
    前頁：函數 () {
        var _self=這個;
        _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=這個;
        _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);
        }
    },
    頁數：函數 () {
        var _self=這個;
        if(this.pageSize             for(var i= 1,len=this.pageSize;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                 for(var i= 1;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                 if(this.pageSize                     for(var i=Math.floor(_self.curPage/10)*10 1;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                             _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: 函數 () {
        $(".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();
});

以上就是本分頁元件的核心程式碼了，希望朋友們能夠喜歡。