前段时间一直忙于期末考试和找实习,好久没写博客了。
这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客。
要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行。
那么我们可以设置一个隐藏的input框,用于传递pageIndex给下个页面。
当我们点击上一页的时候,通过js方法改变pageIndex的值,再提交表单即可
二话不多说,看代码,代码里面写的还算比较清楚。
这个是index.jsp的代码。
nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><meta><title>NoteBook of Eric Wu</title><link><link> 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> <div> <div> <div><a>NoteBook of Eric Wu</a></div> <div>The palest ink is better than the best memory !</div> </div> <div> <ul> <li><a>首页</a></li> <li><a>新增</a></li> <li><a>修改</a></li> <li><a>删除</a></li> </ul> <div>记录-</div> <!--end: Stats 状态--> </div> <!-- end: navigator 导航栏 --> </div> <!-- end: header 头部 --><div> <div> <form> <input><div> <div></div> <input><img alt="jsp实现上下页的分页功能" > </div> </form> <table> <tr> <th>序号</th> <th>标题</th> <th>时间</th> </tr> <tr> <td></td> <td><a>" target="_blank"></a></td> <td></td> </tr> <tr><td>共条记录 共页 每页10条 当前第页 <a>上一页</a> <a>下一页</a> </td></tr> </table> </div> <!-- end: content 内容 --> </div> <!-- end: main 主要部分 --><div> Copyright ©2017 汕大-吴广林</div> <!-- end: footer底部--> </div><!-- end: home 自定义的最大容器 --><script>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>
翻页后:pageIndex=1
翻页后:pageIndex=2
以上就是jsp实现上下页的分页功能的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号