翻页 java_jsp实现上一页下一页翻页功能

本文介绍如何在Java JSP中实现上一页下一页的翻页功能。通过设置pageIndex并利用隐藏input传递值,结合JavaScript进行页面提交,实现了简单的翻页效果。文章包含相关代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[导读]前段时间一直忙于期末考试和找实习,好久没写博客了。这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客。

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

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

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

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

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

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

这个是index.jsp的代码。

index.jsp

pageEncoding="UTF-8"%>

html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

NoteBook of Eric Wu

int allRecord=0;//总的记录条数,不包含查询后的

int totalRecord=0;//总的记录条数,包含查询后的

int totalPage=1;//总的页面数,包含查询后的

int pageIndex=1;//当前页面号,用于控制页面翻转,默认为1

List 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);//便于后面使用

%>

NoteBook of Eric Wu
The palest ink is better than the best memory !
  • 首页
  • 新增
  • 修改
  • 删除

记录-

                    

序号标题时间

int count=0;

if(records!=null){

for(Record r: records){

count++;

%>

"  target="_blank">

}

}

%>

共条记录   

共页   

每页10条   

当前第页   

上一页   

下一页   

Copyright ©2017 汕大-吴广林

var pageIndex=;

var 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();

}

效果图

翻页后:pageIndex=1

5731b10d7ef90bbb194d60a0eb10db5d.png

翻页后:pageIndex=2

ea6f6b173854ff348304c75517807b28.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值