方法一:
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页面中使用