js分页工具实例
本文实例讲述了js分页工具的用法。分享给大家供大家参考。具体实现方法如下：
js代码部分：
/**
*分页js
*/
varPage;
(function(){
varPage={version:"1.0",author:"liuxingmi"};
varshowPage=9;
Page.navigation=function(divId,totalRecord,totalPage,currentPage,func){
varnav='<ulclass=\"pagination\"title=\"分页列表\">';
nav+='<liclass="totalAnnal">总记录数：<iid="totalRecord">'+totalRecord+'</i></li>';
nav+='<liclass="totalPage">总页数：<iid="totalPage">'+totalPage+'</i></li>';
nav+='<liclass="currentPage">当前页：<bid="pageNum">'+currentPage+'</b></li>';
if(currentPage==1){
nav+='<liclass="firstPagecurrentState"><ahref="javascript:void(0);"id="firstPage"title="首页">首页</a></li>';
nav+='<liclass="previousPagecurrentState"><ahref="javascript:void(0);"id="frontPage"title="前一页">前一页</a></li>';
}else{
nav+='<liclass="firstPage"><ahref="javascript:'+func+'(1);"id="firstPage"title="首页">首页</a></li>';
nav+='<liclass="previousPage"><ahref="javascript:'+func+'('+(currentPage-1)+');"id="frontPage"title="前一页">前一页</a></li>';
}
nav+='<liid="num"><ol>';
varstart=currentPage-Math.floor(showPage/2);
varend=currentPage+Math.floor(showPage/2);
if(end>totalPage){
start-=(end-totalPage);
}
if(start<=0){
start=1;
}
if(currentPage<showPage&&end<showPage){
end=showPage;
}
if(end>totalPage){
end=totalPage;
}
for(vari=start;i<=end;i++){
if(i==currentPage){
nav+='<liclass="currentState"><atitle="转到第1页"href="javascript:'+func+'('+i+');">'+i+'</a></li>';
}else{
nav+='<li><atitle="转到第1页"href="javascript:'+func+'('+i+');">'+i+'</a></li>';
}
}
nav+='</ol></li>';
if(currentPage==totalPage){
nav+='<liclass="nextPagecurrentState"><ahref="javascript:void(0);"id="nextPage"title="后一页">后一页</a></li>';
nav+='<liclass="lastPagecurrentState"><ahref="javascript:void(0);"id="lastPage"title="尾页">尾页</a></i>';
}else{
nav+='<liclass="nextPage"><ahref="javascript:'+func+'('+(currentPage+1)+');"id="nextPage"title="后一页">后一页</a></li>';
nav+='<liclass="lastPage"><ahref="javascript:'+func+'('+totalPage+');"id="lastPage"title="尾页">尾页</a></i>';
}
nav+='</ul>';
$("#"+divId).html(nav);
};
this.Page=Page;
})();
css部分：
/*分页样式开始*/
.pagination{
overflow:hidden;
margin:00025px;
padding:10px10px6px150px;
border-top:1pxsolid#c8c8c8;
_zoom:1;
text-align:center;
}
.pagination*{
display:inline;
float:left;
margin:0;
padding:0;
font-size:12px;
}
.paginationi{
float:none;
padding-right:1px;
}
.currentPageb{
float:none;
color:#f00;
}
.paginationli{
list-style:none;
margin:05px;
}
.paginationlili{
position:relative;
margin:-2px00;
font-family:Arial,Helvetica,sans-serif
}
.firstPagea,.previousPagea,.nextPagea,.lastPagea{
overflow:hidden;
height:0;
text-indent:-9999em;
border-top:8pxsolid#fff;
border-bottom:8pxsolid#fff;
}
.paginationlilia{
margin:01px;
padding:04px;
border:3pxdouble#fff;
+border-color:#eee;
background:#eee;
color:#06f;
text-decoration:none;
}
.paginationlilia:hover{
background:#f60;
border-color:#fff;
+border-color:#f60;
color:#fff;
}
li.firstPage{
margin-left:40px;
border-left:3pxsolid#06f;
}
.firstPagea,.previousPagea{
border-right:12pxsolid#06f;
}
.firstPagea:hover,.previousPagea:hover{
border-right-color:#f60;
}
.nextPagea,.lastPagea{
border-left:12pxsolid#06f;
}
.nextPagea:hover,.lastPagea:hover{
border-left-color:#f60;
}
.paginationli.lastPage{
border-right:3pxsolid#06f;
}
.paginationlili.currentStatea{
position:relative;
margin:-1px3px;
padding:1px4px;
border:3pxdouble#fff;
+border-color:#f60;
background:#f60;
color:#fff;
}
.paginationli.currentState,.currentStatea,.currentStatea:hover{
border-color:#fff#ccc;
cursor:default;
}
/*分页样式结束*/
调用方法：
Page.navigation("pageNav",100,10, 1,"xxxList");
<divid="pageNav"></div>