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.通知后端开发人员（自己写）给出获取总页数接口