基于jQuery的轻量级JavaScript分页组件实现

分页组件概述

这是一个轻量级的自定义分页组件，其核心功能与逻辑均封装在JavaScript中。在HTML页面中，只需添加一个用于渲染分页控件的DIV元素，并指定该容器的ID即可。

HTML结构

HTML结构定义如下：

<ul class="pagination" id="pageDIV">
</ul>
其中 class="pagination" 用于定义分页组件的视觉样式。
id="pageDIV" 则作为容器标识，用于承载由JavaScript动态生成的分页元素。

CSS样式定义

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

JavaScript核心逻辑

以下是JavaScript核心逻辑，使用时需确保已引入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();
});

以上即为该分页组件的核心代码，供参考使用。