分享一个自己写的简单的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);