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":[{},{}....]}