<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"><</a>';
var pageHTML_2 = '<a href="javascript:laterPageSize('+pageSize+')" class="a1">></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改为自己的请求
分享到:
相关推荐
Ajax+Servlet+Java+JavaScript实现分页,这个方法相当方便,你绝对没想到!
得用JavaScript面向对象编程,编写了一个分页通过控件。代码精简,功能强大.
本文主要介绍了JavaScript实现分页效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
主要为大家详细介绍了原生javascript实现分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
实现简单的javascript 分页功能。 实现简单的javascript 分页功能。 实现简单的javascript 分页功能。
因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用 这块代码写了两个稍微不同一些的分页!公共的...
javascript实现网页中动态创建表并实现分页的特效
一个非常精巧的javascript实现的Bootstrap分页插件,您不需要依赖任何第三方类库,只需要通过简单的引用调用,即可实现动态显示Bootstrap分页组件
javascript实现前端分页功能 前言:今天给大家带来的是前端数据的分页功能,供大家参考,具体内容如下 先上一波效果图展示: 直接上代码:这里使用的是JavaScript来实现 关于代码详解都以注释的方式写在...
javascript实现前端分页效果.docx
javascript实现前端分页功能.docx
使用纯JavaScript实现表格分页显示,提供页面跳转功能,包括首页、上一页、下一页、尾页等功能。
JavaScript脚本实现分页功能,齐全的分页效果,简单实用
用javascript实现的分页 可以拖拽 超炫
简单的JAVASCRIPT与JSON实现分页
ajax实现分页 自己的课程作业 只需建立数据源 用myeclipse运行
基于Jquery+Ajax+Json实现分页显示附效果图