分享一个自己写的简单的javascript分页组件

自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id.

html结构如下:

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

</ul>

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 显示数据的回调函数

 */

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= function () {

            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= function () {

            if(_self.curPage<_self.pageSize){

                _self.curPage++;

            }

            _self.callback.call(this,this.curPage);

            _self.init();

            console.log(_self.curPage);

        }

    },

    pagenum: 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= function () {

                    var curpage = $(this).text();

                    _self.gotopage(curpage);

                }

            }

        }

        else{

            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= function () {

                        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)

                        return;

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

                            }

                        }

                    }else{

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

                            }

                        }

                    }

                }

            }

        }

        $(".pagination li").each(function(){

            if($(this)[0].innerText==_self.curPage){

                $(".pagination li").children("a").removeClass("navcur");

                $(this).children("a").addClass("navcur");

            }

        });

    },

    gotopage: function (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();

    }

};

$(function(){

    var pager = new PageList("pageDIV",{

        curPage:1,

        totalCount:26,

        pageRows:1,

        callback:callbackFuc

    });

    pager.init();

});

function callbackFuc(curpage){

}

说明:

此分页是以10页为标准,低于10页的时候全部显示,大于10页的时候,进行翻页显示余下页数.

调用方法:

$(function(){

    var pager = new PageList("pageDIV",{

        curPage:1,

        totalCount:26,

        pageRows:1,

        callback:callbackFuc

    });

    pager.init();

});

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