网站建设为中心,网站建设格局,个人网站酷站赏析,wordpress 用户验证失败前段时间一直忙于期末考试和找实习#xff0c;好久没写博客了。
这段时间做了个小项目#xff0c;包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深#xff0c;打算玩深后再写篇博客。
要实现翻页功能#xff0c;只需要设置一个pageIndex即可#xf…前段时间一直忙于期末考试和找实习好久没写博客了。
这段时间做了个小项目包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深打算玩深后再写篇博客。
要实现翻页功能只需要设置一个pageIndex即可然后每次加载页面时通过pageIndex去加载数据就行。
那么我们可以设置一个隐藏的input框用于传递pageIndex给下个页面。
当我们点击上一页的时候通过js方法改变pageIndex的值再提交表单即可
二话不多说看代码代码里面写的还算比较清楚。
这个是index.jsp的代码。
index.jsp %page importBean.DBBean%
%page importEntity.Record%
%page importjava.util.List%
% page languagejava contentTypetext/html; charsetUTF-8pageEncodingUTF-8%
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
titleNoteBook of Eric Wu/titlelink relstylesheet hrefcss/basic.csslink relstylesheet hrefcss/index.css
/head
body
%int allRecord0;//总的记录条数,不包含查询后的int totalRecord0;//总的记录条数,包含查询后的int totalPage1;//总的页面数包含查询后的int pageIndex1;//当前页面号用于控制页面翻转默认为1ListRecord recordsnull;DBBean dbnew DBBean();allRecorddb.getRecordCount();totalRecorddb.getRecordCount();totalPage(totalRecord-1)/10 1;if(request.getParameter(pageIndex)!null){//不是第一次加载//要做下数据类型转换pageIndexInteger.valueOf(request.getParameter(pageIndex));if(request.getParameter(keyword)!null){String keywordrequest.getParameter(keyword);recordsdb.getRecords(pageIndex,keyword);//获取查询内容一页的事件记录集,共10条totalRecorddb.getRecordCount(keyword);totalPage(totalRecord-1)/10 1;}else{recordsdb.getRecords(pageIndex);//获取一页的事件记录集,共10条}}else{//第一次加载recordsdb.getRecords(pageIndex);//获取一页的事件记录集,共10条}session.setAttribute(records, records);//便于后面使用
%div idhomediv idheaderdiv idWebTitlediv classmaintitlea hrefindex.jsp target_blankNoteBook of Eric Wu/a/divdiv classsubtitleThe palest ink is better than the best memory !/div/divdiv idnavigatorul idnavListlia hrefindex.jsp首页/a/lilia hrefadd.jsp新增/a/lilia hrefchange.jsp修改/a/lilia hrefdelete.jsp删除/a/li/uldiv idStats记录-%allRecord %/div!--end: Stats 状态--/div!-- end: navigator 导航栏 --/div!-- end: header 头部 --div idmaindiv idcontentform idsearchForm namesearchForm actionindex.jsp methodgetinput typehidden namepageIndex idpageIndex value1div idsearchdiv classcenter/divinput typetext classsearch idkeyword namekeyword placeholder请输入要查询的记录img srcimg/search.png onclicksearchKeyword(); classbutton/div/formtabletrth width10%序号/thth width60%标题/thth width30%时间/th/tr%int count0;if(records!null){for(Record r: records){count ;%trtd classcenter% count %/tdtda hrefcontent.jsp?recordId% r.getId() % target_blank% r.getTitle() %/a/tdtd classcenter% r.getTime() %/td/tr% }}%tr classalt td classcenter colspan3共% totalRecord %条记录nbsp;nbsp;nbsp;共% totalPage %页nbsp;nbsp;nbsp;每页10条nbsp;nbsp;nbsp;当前第% pageIndex %页nbsp;nbsp;nbsp;a hrefjavascript:void(0); classturnPage onclickturnTopPage()上一页/anbsp;nbsp;nbsp;a hrefjavascript:void(0); classturnPage onclickturnBottomPage()下一页/anbsp;nbsp;nbsp;/td/tr/table/div!-- end: content 内容 --/div!-- end: main 主要部分 --div idfooter Copyright copy;2017 汕大-吴广林/div!-- end: footer底部--/div!-- end: home 自定义的最大容器 --
/bodyscript typetext/javascriptvar pageIndex%pageIndex %;var totalPage%totalPage %;console.log(pageIndex);//上一页function turnTopPage(){if(pageIndex1){return;}else{document.getElementById(pageIndex).valuepageIndex-1;document.getElementById(searchForm).submit();}}//下一页function turnBottomPage(){if(pageIndextotalPage){ return;}else{document.getElementById(pageIndex).valuepageIndex 1;document.getElementById(searchForm).submit();}}function searchKeyword(){document.getElementById(pageIndex).value1;document.getElementById(searchForm).submit();}
/script
/html 效果图
翻页后pageIndex1 翻页后pageIndex2 更多专业前端知识请上
【猿2048】www.mk2048.com
