Semantic UI Pagination

semantic ui pagination html

<divclass="uiborderlesspaginationmenu">
<aclass="item">
<iclass="leftarrowicon"></i>PrevIoUs</a>
<aclass="item">1</a>
<aclass="item">2</a>
<aclass="item">3</a>
<aclass="item">4</a>
<aclass="item">5</a>
<aclass="item">6</a>
<aclass="item">
Next<iclass="iconrightarrow"></i>
</a></div>

http://semantic-ui.com/collections/menu.html

ajax pagination javascript

functionPagination(obj){
this.id=obj.id;//divid
this.url=obj.url;
this.pageSize=obj.pageSize;
this.pageNum=1;//currentpagenumber
this.total=0;//totalcount
this.totalPage=0;
this.barSize=obj.barSize;//分页工具条上展现的页码数
this.numPoint=1;
this.data=obj.data;
this.success=obj.success;
this.error=obj.error;
this.div=null;
this.init();
}
Pagination.prototype.init=function(){
if(this.data==undefined){
this.data={}
}
this.div=$('#'+this.id);
this.fetchData(1);
};

Pagination.prototype.fetchData=function(pageNum){
this.data.pageNum=pageNum;
this.data.pageSize=this.pageSize;
varthat=this;
$.ajax({
url:that.url,data:that.data,type:'post',dataType:'json',success:function(data){
if(data.total==undefined){
that.success(data.rows);
return;
}
that.total=data.total;
vartmp=that.total%that.pageSize;
varnum=Math.floor(that.total/that.pageSize);
that.totalPage=tmp==0?num:num+1;
that.showUI();
that.success(data.rows);
},error:function(msg){
that.error(msg);
}
})
};
Pagination.prototype.showUI=function(){
varthat=this;
this.div.empty();
varcurrentBarSize=this.totalPage-(this.numPoint-1)*this.barSize;
currentBarSize=currentBarSize>this.barSize?this.barSize:currentBarSize;
this.div.append('<aclass="item"><iclass="leftarrowicon"></i>上一页</a>');
for(vari=0;i<currentBarSize;i++){
this.div.append('<aclass="item">'+(this.pageNum+i)+'</a>');
}
this.div.append('<aclass="item">下一页<iclass="iconrightarrow"></i></a>');

vararray=this.div.find('a');
for(varj=0;j<array.length;j++){
varcurrent=$(array[j]);
if(j==0){
current.click({param:that},that.previewPage);
}elseif(j==array.length-1){
current.click({param:that},that.nextPage)
}else{
current.click({param:that},function(event){
varp=event.data.param;
varn=$(this).text().trim();
p.fetchData(parseInt(n));
})
}
}
};
Pagination.prototype.nextPage=function(event){
varthat=event.data.param;
if(that.numPoint>1){
that.div.find('a').first().attr('class','item');
}
if(that.numPoint>=Math.ceil(that.totalPage/that.barSize)){
that.div.find('a').last().attr('class','disableditem');
}else{
that.pageNum=that.numPoint*that.barSize+1;
that.numPoint++;
that.showUI();
}
};
Pagination.prototype.previewPage=function(event){
varthat=event.data.param;
if(that.numPoint<Math.ceil(that.totalPage/that.barSize)){
that.div.find('a').last().attr('class','item');
}
if(that.numPoint==1){
that.div.find('a').first().attr('class','disableditem');
}else{
that.numPoint--;
that.pageNum=(that.numPoint-1)*that.barSize+1;
that.showUI();
}
};

示例

newPagination({
id:"pagination",url:"<c:urlvalue="/image/showImage"/>",pageSize:5,//每页显示的记录数
barSize:5,//分页工具条上展现的页码数
data:{panoId:'201501055A_1353497',model:'sphere',level:'F'},success:function(rows){//回调函数
console.log(rows);
},error:function(msg){//回调函数
console.log(msg);
}
})

服务端返回的数据格式：

{"total":33,"rows":[{},{}....]}