html5 下一页的代码,jsp实现上一页下一页翻页功能(示例代码)
前段时间一直忙于期末考试和找实习,好久没写博客了。
这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客。
要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行。
那么我们可以设置一个隐藏的input框,用于传递pageIndex给下个页面。
当我们点击上一页的时候,通过js方法改变pageIndex的值,再提交表单即可
二话不多说,看代码,代码里面写的还算比较清楚。
这个是index.jsp的代码。
index.jsp
pageEncoding="UTF-8"%>
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);//便于后面使用
%>
- 首页
- 新增
- 修改
- 删除
记录-
序号 | 标题 | 时间 |
---|
int count=0;
if(records!=null){
for(Record r: records){
count++;
%>
}
}
%>
共条记录
共页
每页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
翻页后:pageIndex=2
以上这篇jsp实现上一页下一页翻页功能(示例代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
html5 下一页的代码,jsp实现上一页下一页翻页功能(示例代码)相关推荐
- android有道翻译代码,Android使用有道翻译API实如今线翻译功能(示例代码)
在Android应用中,加入在线翻译的功能,这里调用的是有道翻译的API. 使用有道翻译API.首先要申请一个key,申请地址为:有道翻译API申请地址. 申请之后就会得到一个keyfrom和一个ke ...
- jsp中未登录用户也可以浏览页面的功能实现代码
jsp中未登录用户也可以浏览页面的功能实现代码 <%! int count=0; %> < ...
- 上传pdf文件转图片翻页小工具,遇到JSP form中type=file的文件上传及后台Part处理问题(后台取值为null)
最近公司要求做一个上传pdf文件后将文件转换为翻页图片的小工具,我是这么做的 1.先找图片翻页的demo,微软有现有的产品turn.js感兴趣的可以自己看一下 ,有双页的有单页的,因为我司要求手机端使 ...
- layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
始于 layui 的一个多选解决方案,前身 formSelects, 由于渲染速度慢, 代码冗余, 被放弃了.xm-select使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, ...
- 织梦手机站文章页调用显示只显示 上一篇下一篇 不显示标题
include目录下的这个文件:arc.archives.class.php中做以下修改 将827行代码-834行代码替换成$this->PreNext['pre'] = "上一篇:& ...
- JSP使用上传文件,并生产高清缩略图示例
前言 刚开始本来只想来测试一下Thumbnails生成缩略图的效果的,顺便来学一下jsp文件,开始没有使用commons-fileupload上传组件,自己用纯jsp代码来编写,过程相当曲折.所以就不 ...
- android 上下翻页素材,【Android 进阶】仿抖音系列之翻页上下滑切换视频(四)...
前言 大家好,这是这个系列的第四篇,在阅读这篇文章之前,建议可以先看下之前系列的文章,为了节省篇幅,之前详细说过的地方,这里就不再详细描述了: 这一篇,要说实现的是第一篇中的翻页切换视频. 思路 在第 ...
- vue实现上下滑动翻页_如何通过vue实现一款简单通用的翻页组件
预览 先上一波效果图: 基本元素 首先,翻页组件(以下称"pager组件")一般拥有的元素有: 上一页 第一页 中间显示的页码 最后一页 下一页 初始化时需要的配置有: total ...
- html代码选择试题及答案,前端面试题及答案,HTML(示例代码)
1.1.标签上title属性与alt属性的区别是什么? alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的.且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短. 这包括那些 ...
- android 仿真翻页动画,Android 两Activity之间动画效果(1)---------翻页效果
用Android rotate动画实现翻页效果,效果如图: 要实现上面动画,首先搞明白rotate动画原理: (1)Degrees坐标: 0度(360度) 270度 90度 顺时针旋转 180 (2 ...
最新文章
- python减少内存_如何降低 Python 的内存消耗量?
- angularJS中directive与controller之间的通信
- 每日一皮:男性同胞,是时候反击了!
- tomcat启动完成执行 某个方法 定时任务(Spring)
- Spring和SpringMVC总结篇
- 根据id 隐藏_明星ID价值四位数?吃鸡玩家崩溃:打工一个月工资还没名称值钱...
- 服务器推送_初探 Watermill 构建 Golang 事件驱动程序,SSE 进行 HTTP 服务器推送
- R语言 朴素贝叶斯分类预测
- QTableView双击 单机事件信号
- Strtus2标签s:url
- 从 0 开始机器学习 - 机器学习系统的设计与误差分析
- html5 切换语言,Vue项目中使用国际化, 并配置动态切换语言的方法
- 修改音频采样率和单双通道
- 【LLS-Player】webrtc m94下载
- 2010刚出土的句子
- 11款国内外多厂家linux面板介绍(含视频对比)
- 游戏运营的十二大组成
- java拼接sql语句的in条件
- 【Java】文如何制作帮助文档
- sizeof结构体指针