Javascript实现分页

<script>function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script>

此分页需要一个js文件，一个简单的css样式

下面就是js文件：

//turnpage.js
var beginNum;//blow begin Number
var endNum;//blow end Number
var currentCycle;
var totalCycle;
function initPageDiv(totalPage,currentPage,pageSize){//alert("totalPage;"+totalPage+" ,"+"currentPage:"+currentPage+",pageSize:"+pageSize);
if(totalPage<=0){
totalPage=0;
currentPage=0;
}
if(totalPage >1){
var firstPageHTML='';
if(currentPage==1){
firstPageHTML='<a href="javascript:doFirstPage('+totalPage+','+currentPage+');" class="a2">【首頁】</a>';
}else{
firstPageHTML='<a href="javascript:doFirstPage('+totalPage+','+currentPage+');" class="a1">【首頁】</a>';
}
var lastPageHTML='';
if(currentPage==totalPage){
lastPageHTML='<a href="javascript:doLastPage('+totalPage+','+currentPage+');" class="a2">【末頁】</a>';
}else{
lastPageHTML='<a href="javascript:doLastPage('+totalPage+','+currentPage+');" class="a1">【末頁】</a>';
}

var prePageHTML = '<a href="javascript:doPrePage('+totalPage+','+currentPage+');" class="a1">【上一頁】</a>';
var nextPageHTML = '<a href="javascript:doNextPage(' + totalPage + ',' + currentPage +');" class="a1">【下一頁】</a>';
if(totalPage<=0)
currentPage=0;
//var pageINFO='【第'+currentPage+'頁 共'+totalPage+'頁】';

var pageHTML = '';

calculate(totalPage,currentPage,pageSize);
//alert("begin:"+beginNum+" ,endNum:"+endNum);
for(var k = beginNum ; k <= endNum; k++){
if(k==currentPage){
pageHTML=pageHTML+'<span class="a2"> '+k+' </span>';
continue;
}
pageHTML=pageHTML+'<a href="javascript:trunPages('+totalPage+','+currentPage+','+k+')" class="a1"> '+k+' </a>';
}
var pageHTML_1 = '<br/><a href="javascript:prePageSize('+pageSize+')" class="a2">&lt;</a>';
var pageHTML_2 = '<a href="javascript:laterPageSize('+pageSize+')" class="a1">&gt;</a>';
var in3_content_b = document.getElementById("turnPage");
if(in3_content_b!=null){
//in3_content_b.innerHTML = firstPageHTML + prePageHTML + nextPageHTML + lastPageHTML+pageINFO+pageHTML_1+pageHTML+pageHTML_2;
in3_content_b.innerHTML = firstPageHTML + prePageHTML + nextPageHTML + lastPageHTML + pageHTML_1 + pageHTML + pageHTML_2;
}

}else{

var pageINFO='【第'+currentPage+'頁 共'+totalPage+'頁】';

var in3_content_b = document.getElementById("turnPage");

if(in3_content_b!=null){
in3_content_b.innerHTML = pageINFO;
}
}
}

function trunPages(totalPage,currentPage,pageNumber){//alert(totalPage+";"+currentPage+":"+pageNumber);
if(pageNumber>=1||pageNumber<=totalPage){
document.location=url+pageNumber;
}else{
return;
}

}

function doPrePage(totalPage,currentPage){
if(currentPage <=1){
alert("已經在第一頁");
return;
}else{
document.location=url+(currentPage-1);
}
}

function doNextPage(totalPage,currentPage){
if(currentPage >= totalPage){
alert("已經在最後一頁");
return;
}else{
document.location=url+(currentPage+1);
}
}

function doFirstPage(totalPage,currentPage){
if(currentPage<=1){
alert("已經在第一頁");
return;
}else{
document.location=url+1;
}
}

function doLastPage(totalPage,currentPage){
if(currentPage==totalPage){
alert("已經在最後一頁");
return;
}else{
document.location=url+totalPage;
}
}

function calculate(totalPage,currentPage,pageSize){
var cycle=totalPage%pageSize;
if(cycle==0){
totalCycle=totalPage/pageSize;
}else{
totalCycle=Math.floor(totalPage/pageSize)+1;
}
for(var i=1;i<=totalCycle;i++){
if(currentPage<=i*pageSize){
beginNum=(i-1)*pageSize+1;//alert("b:"+beginNum);
if(totalPage<i*pageSize){
endNum = totalPage;
}else{
endNum=i*pageSize;
}
currentCycle=i;
break;
}
}
}
//前多少页
function prePageSize(pageSize){
var currentPageNum=1;
if(currentCycle>1){//alert("currentCycle:"+currentCycle);
currentPageNum=pageSize*(currentCycle-2)+1;//alert("begin:"+currentPageNum);
document.location=url+currentPageNum;
}
}
//后多少页
function laterPageSize(pageSize){
var currentPageNum=1;
if(currentCycle<totalCycle){
currentPageNum = pageSize*currentCycle+1;//alert("begin:"+currentPageNum);
document.location=url+currentPageNum;
}
}

下面是css文件，用到两个样式，只要页面把这个样式用进去就好了

//css
.a1 {
font-size: 12px;
color: #7BAF29;
line-height: 25px;}
A.a1:link {color: #7BAF29; text-decoration: none;}
A.a1:visited {color:#7BAF29; text-decoration:none;}
A.a1:hover {text-decoration:none;color: #B3D878;}

.a2{font-size:12px;
color: #666666;
line-height: 20px;
text-decoration: none ;}
A.a2:link {color: #666666; text-decoration: none;}
A.a2:visited {color:#666666; text-decoration:none;}
A.a2:hover {text-decoration:none;color: #999999;
}

下面是最重要地，在你的jsp页面放入一个div

<div algin="center" valgin="BOTTOM" id="turnPage" class="in3_content_b"></div>

然后再把以下js 放在页面

<script language="javascript">
var url="<%=base%>/pages/public/searchMagazine.jspx?magazineName="+encodeURI("<%=magazineName%>")+"&magazineContext="+encodeURI("<%=magazineContext%>")+"&pageNum=";
initPageDiv(<%=totalPages %>,<%=pageNumber %>,10);
</script>

totalPages 为总页数

pageNumber 为本页是第几页

10表示分页<1 2 3 4 5 6 7 8 9 10>每次显示10页，可以调整

当用户点了数字或下一页，或 上一页，或首页，或末页时，就用会url的值后面加上页码，发出请求，可根据需要把url改为自己的请求