登录  /  注册
首页 > web前端 > js教程 > 正文

jsp实现上下页的分页功能

巴扎黑
发布: 2017-07-19 15:19:06
原创
2026人浏览过

前段时间一直忙于期末考试和找实习,好久没写博客了。

这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客。

要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行。

那么我们可以设置一个隐藏的input框,用于传递pageIndex给下个页面。

当我们点击上一页的时候,通过js方法改变pageIndex的值,再提交表单即可

二话不多说,看代码,代码里面写的还算比较清楚。

这个是index.jsp的代码。

index.jsp

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;<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);//便于后面使用%&gt;<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"&gt;</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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号