900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > servlet+js实现首页 尾页 下一页 上一页(翻页功能)

servlet+js实现首页 尾页 下一页 上一页(翻页功能)

时间:2021-04-29 07:30:39

相关推荐

servlet+js实现首页 尾页 下一页 上一页(翻页功能)

方法一:

1.首先,假设后端已经把分页数据做好

2.在html/jsp界面上增加按钮

<input type="button" id="first" value="首页"><input type="button" id="before" value="上一页"><input type="button" id="next" value="下一页"><input type="button" id="last" value="尾页">

3.接下来在js中添加事件,绑定事件(需要servlet传总页数)

window.onload = function () {document.getElementById("first").addEventListener("click", goFirst, false);document.getElementById("next").addEventListener("click", goNext, false);document.getElementById("before").addEventListener("click", goBefore, false);document.getElementById("last").addEventListener("click", goLast, false);if (null == window.sessionStorage.getItem("currentPage")){window.sessionStorage.setItem("currentPage", "1");}window.sessionStorage.setItem("totalPage", "${totalPage}");};function goFirst() {window.sessionStorage.setItem("currentPage","1");window.location.href = "viewUser?currentPage=1";};function goNext() {if (window.sessionStorage.getItem("currentPage") == window.sessionStorage.getItem("totalPage")){return;}var currentPage = parseInt(window.sessionStorage.getItem("currentPage"));currentPage = currentPage + 1;window.sessionStorage.setItem("currentPage", currentPage.toString());console.log(window.sessionStorage.getItem("currentPage"));window.location.href = "viewUser?currentPage=" + currentPage.toString();console.log(currentPage)};function goBefore() {if (window.sessionStorage.getItem("currentPage") == "1"){return;}var currentPage = parseInt(window.sessionStorage.getItem("currentPage"));currentPage = currentPage - 1;window.sessionStorage.setItem("currentPage", currentPage.toString());console.log(window.sessionStorage.getItem("currentPage"));window.location.href = "viewUser?currentPage=" + currentPage.toString();};function goLast() {console.log(window.sessionStorage.getItem("totalPage"));window.sessionStorage.setItem("currentPage", window.sessionStorage.getItem("totalPage"));window.location.href = "viewUser?currentPage=" + window.sessionStorage.getItem("totalPage");}

4.通知后端开发人员(自己写)给出获取总页数接口

5.在需要用到翻页的时候可以套用

方法二:

1.首先,假设后端已经把分页数据做好

2.在html/jsp界面上增加按钮

<input type="button" id="first" value="首页"><input type="button" id="before" value="上一页"><input type="button" id="next" value="下一页"><input type="button" id="last" value="尾页">

3.在servlet中把页数信息存入到session作用域中

if (request.getRequestURI().contains("viewUser")) {IUser userdao = (IUser) BeanFactory.getBean(IUser.class);String currentPage = request.getParameter("currentPage");if (null==currentPage){currentPage="1";}int totalpage = 0;//减少对数据库的请求次数if (request.getSession().getAttribute("totalPage") == null){totalpage = userdao.getUserTotalPage(5);request.getSession().setAttribute("totalPage", totalpage);}request.getSession().setAttribute("currentPage", currentPage);List<Users> usersList = userdao.userView(5, Integer.parseInt(currentPage));request.setAttribute("userList", usersList);request.getRequestDispatcher("user/viewUsers.jsp").forward(request, response);}

4.接下来在js中添加事件,绑定事件

//定义全局变量var currentPage = null;var totalPage = null;window.onload = function () {document.getElementById("first").addEventListener("click", goFirst, false);document.getElementById("next").addEventListener("click", goNext, false);document.getElementById("before").addEventListener("click", goBefore, false);document.getElementById("last").addEventListener("click", goLast, false);//从session作用域获取页数信息currentPage = '${sessionScope.currentPage}';totalPage = '${sessionScope.totalPage}';};function goFirst() {window.location.href = "viewUser?currentPage=1";};function goNext() {//判断是否到了最后一页if (currentPage == totalPage) {return;}window.location.href = "viewUser?currentPage=" + (parseInt(currentPage) + 1).toString();};function goBefore() {//判断是否是第一页if (currentPage == "1") {return;}window.location.href = "viewUser?currentPage=" + (parseInt(currentPage) - 1).toString();};function goLast() {window.location.href = "viewUser?currentPage=" + totalPage;}

5.通知后端开发人员(自己写)给出获取总页数接口

总结:

感觉方法二好一点,代码比较简洁,两种方法区别就是谁来存而已,方法二中servlet把页数信息存到session作用域中还可以在jsp页面中使用

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。