用js实现两个按钮效果，上一页 下一页，点上一页按钮页面跳转到上一页，点下一页按钮页面跳转到下一页。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用js实现两个按钮效果，上一页 下一页，点上一页按钮页面跳转到上一页，点下一页按钮页面跳转到下一页。相关的知识，希望对你有一定的参考价值。
function change()
<body>
<input type="button" value="上一页" onclick=""/>
<input type="button" value="下一页" onclick=""/>
</body>
现在关键之处是function内方法怎么写
这是典型的分页，你这个布局是有点问题的。分页的页是动态创建出来的。
html：<div id="div1"></div>直接一个DIV就行，是分页的容器！下面是一个分页的例子的代码。我建议你还是网上找一套关于javascript分页的视频来看，看完自然就懂了。
window.onload = function()var oBox=document.getElementById(\'box\');
var aDiv=oBox.getElementsByTagName(\'div\');
page(
id : \'div1\',
nowNum : 1,
allNum : 15,
callBack : function(now,all)
alert(\'当前页:\' + now +\',总共页:\'+all)
);
;
function page(opt)
if(!opt.id)return false;
var obj = document.getElementById(opt.id);
var nowNum = opt.nowNum || 1;
var allNum = opt.allNum || 5;
var callBack = opt.callBack || function();
if( nowNum>=4 && allNum>=6 )
var oA = document.createElement(\'a\');
oA.href = \'#1\';
oA.innerHTML = \'首页\';
obj.appendChild(oA);
if(nowNum>=2)
var oA = document.createElement(\'a\');
oA.href = \'#\' + (nowNum - 1);
oA.innerHTML = \'上一页\';
obj.appendChild(oA);
if(allNum<=5)
for(var i=1;i<=allNum;i++)
var oA = document.createElement(\'a\');
oA.href = \'#\' + i;
if(nowNum == i)
oA.innerHTML = i;
else
oA.innerHTML = \'[\'+ i +\']\';
obj.appendChild(oA);
else
for(var i=1;i<=5;i++)
var oA = document.createElement(\'a\');
if(nowNum == 1 || nowNum == 2)
oA.href = \'#\' + i;
if(nowNum == i)
oA.innerHTML = i;
else
oA.innerHTML = \'[\'+ i +\']\';
else if( (allNum - nowNum) == 0 || (allNum - nowNum) == 1 )
oA.href = \'#\' + (allNum - 5 + i);
if((allNum - nowNum) == 0 && i==5)
oA.innerHTML = (allNum - 5 + i);
else if((allNum - nowNum) == 1 && i==4)
oA.innerHTML = (allNum - 5 + i);
else
oA.innerHTML = \'[\'+ (allNum - 5 + i) +\']\';
else
oA.href = \'#\' + (nowNum - 3 + i);
if(i==3)
oA.innerHTML = (nowNum - 3 + i);
else
oA.innerHTML = \'[\'+ (nowNum - 3 + i) +\']\';
obj.appendChild(oA);
if( (allNum - nowNum) >= 1 )
var oA = document.createElement(\'a\');
oA.href = \'#\' + (nowNum + 1);
oA.innerHTML = \'下一页\';
obj.appendChild(oA);
if( (allNum - nowNum) >= 3 && allNum>=6 )
var oA = document.createElement(\'a\');
oA.href = \'#\' + allNum;
oA.innerHTML = \'尾页\';
obj.appendChild(oA);
callBack(nowNum,allNum);
var aA = obj.getElementsByTagName(\'a\');
for(var i=0;i<aA.length;i++)
aA[i].onclick = function()
var nowNum = parseInt(this.getAttribute(\'href\').substring(1));
obj.innerHTML = \'\';
page(
id : opt.id,
nowNum : nowNum,
allNum : allNum,
callBack : callBack
);
return false;
;
参考技术A 首先要获取当前页数，这个你能做到不
上一页 onclick="change('页数-1')";
下一页 onclick="change('页数+1')";
function change(page)
window.location.href = "testpage"+page+".com";
参考技术B function change(url)
window.location.href =url；
传进的url为跳转地址 参考技术C 上一页可以采用javascript:history.back(-1)的方式，直接在onclick里面写这个，下一页就不晓得了，你可以用用别的办法比如action或者servlet之类的
jsp实现上一页下一页翻页功能
前段时间一直忙于期末考试和找实习，好久没写博客了。
这段时间做了个小项目，包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深，打算玩深后再写篇博客。
要实现翻页功能，只需要设置一个pageIndex即可，然后每次加载页面时通过pageIndex去加载数据就行。
那么我们可以设置一个隐藏的input框，用于传递pageIndex给下个页面。
当我们点击上一页的时候，通过js方法改变pageIndex的值，再提交表单即可
二话不多说，看代码，代码里面写的还算比较清楚。
这个是index.jsp的代码。
index.jsp
<%@page import="Bean.DBBean"%> <%@page import="Entity.Record"%> <%@page import="java.util.List"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>NoteBook of Eric Wu</title> <link rel="stylesheet" href="css/basic.css"> <link rel="stylesheet" href="css/index.css"> </head> <body> <% int allRecord=0;//总的记录条数,不包含查询后的 int totalRecord=0;//总的记录条数,包含查询后的 int totalPage=1;//总的页面数，包含查询后的 int pageIndex=1;//当前页面号，用于控制页面翻转，默认为1 List<Record> records=null; DBBean db=new DBBean(); allRecord=db.getRecordCount(); totalRecord=db.getRecordCount(); totalPage=(totalRecord-1)/10+1; if(request.getParameter("pageIndex")!=null){//不是第一次加载 //要做下数据类型转换 pageIndex=Integer.valueOf(request.getParameter("pageIndex")); if(request.getParameter("keyword")!=null){ String keyword=request.getParameter("keyword"); records=db.getRecords(pageIndex,keyword);//获取查询内容一页的事件记录集,共10条 totalRecord=db.getRecordCount(keyword); totalPage=(totalRecord-1)/10+1; }else{ records=db.getRecords(pageIndex);//获取一页的事件记录集,共10条 } }else{//第一次加载 records=db.getRecords(pageIndex);//获取一页的事件记录集,共10条 } session.setAttribute("records", records);//便于后面使用 %> <div id="home"> <div id="header"> <div id="WebTitle"> <div class="maintitle"><a href="index.jsp" target="_blank">NoteBook of Eric Wu</a></div> <div class="subtitle">The palest ink is better than the best memory !</div> </div> <div id="navigator"> <ul id="navList"> <li><a href="index.jsp">首页</a></li> <li><a href="add.jsp">新增</a></li> <li><a href="change.jsp">修改</a></li> <li><a href="delete.jsp">删除</a></li> </ul> <div id="Stats"> 记录-<%=allRecord %> </div><!--end: Stats 状态--> </div><!-- end: navigator 导航栏 --> </div><!-- end: header 头部 --> <div id="main"> <div id="content"> <form id="searchForm" name="searchForm" action="index.jsp" method="get"> <input type="hidden" name="pageIndex" id="pageIndex" value="1"> <div id="search"> <div class="center"></div> <input type="text" class="search" id="keyword" name="keyword" placeholder="请输入要查询的记录"> <img src="img/search.png" onclick="searchKeyword();" class="button"> </div> </form> <table> <tr> <th width="10%">序号</th> <th width="60%">标题</th> <th width="30%">时间</th> </tr> <% int count=0; if(records!=null){ for(Record r: records){ count++; %> <tr> <td class="center"><%= count %></td> <td><a href="content.jsp?recordId=<%= r.getId() %>" target="_blank"><%= r.getTitle() %></a></td> <td class="center"><%= r.getTime() %></td> </tr> <% } } %> <tr class="alt" > <td class="center" colspan="3"> 共<%= totalRecord %>条记录 共<%= totalPage %>页 每页10条 当前第<%= pageIndex %>页 <a href="javascript:void(0);" class="turnPage" onclick="turnTopPage()">上一页</a> <a href="javascript:void(0);" class="turnPage" onclick="turnBottomPage()">下一页</a> </td> </tr> </table> </div><!-- end: content 内容 --> </div><!-- end: main 主要部分 --> <div id="footer"> Copyright ©2017 汕大-吴广林 </div><!-- end: footer底部--> </div><!-- end: home 自定义的最大容器 --> </body> <script type="text/javascript"> var pageIndex=<%=pageIndex %>; var totalPage=<%=totalPage %>; console.log(pageIndex); //上一页 function turnTopPage(){ if(pageIndex==1){ return; }else{ document.getElementById("pageIndex").value=pageIndex-1; document.getElementById("searchForm").submit(); } } //下一页 function turnBottomPage(){ if(pageIndex>=totalPage){ return; }else{ document.getElementById("pageIndex").value=pageIndex+1; document.getElementById("searchForm").submit(); } } function searchKeyword(){ document.getElementById("pageIndex").value=1; document.getElementById("searchForm").submit(); } </script> </html>
效果图
翻页后：pageIndex=1
翻页后：pageIndex=2
以上是关于用js实现两个按钮效果，上一页 下一页，点上一页按钮页面跳转到上一页，点下一页按钮页面跳转到下一页。的主要内容，如果未能解决你的问题，请参考以下文章