ajax实现分页

最新推荐文章于 2024-10-07 21:00:41 发布

hjwgwi

最新推荐文章于 2024-10-07 21:00:41 发布

阅读量171

点赞数 2

文章标签： ajax 前端 javascript java

本文链接：https://blog.csdn.net/hjwgwi/article/details/140858401

版权

<html>
<head>
    <title>Title</title>
</head>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>

<body>

<div>
    <table id="empTb">
        <tr id="tou">
            <th>员工编号</th>
            <th>员工姓名</th>
            <th>职位</th>
        </tr>
    </table>
    <div>
        <a href="javascript:void(0)" id="first" class="pages">首页</a>
        <a href="javascript:void(0)" id="prev" class="pages">上一页</a>
        <a href="javascript:void(0)" id="next" class="pages">下一页</a>
        <a href="javascript:void(0)" id="last" class="pages">最后一页</a>
    </div>

</div>
<script>
    var currPage;   //当前页
    var tPages;  //总页数
    $(function () {
        var getEmpList=function (curr){ //匿名函数 curr为当前页
            $.ajax({
                type: 'POST',
                url: '/EmpQueryPageServlet',
                dataType: 'JSON',
                data:{
                    pageSize:5,
                    pageNum:curr || 1,
                },
                success: function (result) {
                    $("#empTb").find(".nr").remove();
                    $.each(result.empList, function (index, emp) {
                        var $newtr = "<tr class='nr'>"
                            + "<td>" + emp.empno + "</td>"
                            + "<td>" + emp.ename + "</td>"
                            + "<td>" + emp.job + "</td>"
                            + "</tr>";
                        $("#empTb").append($newtr);
                    });
                    currPage = result.pageNum;
                    tPages = result.totalPages;
                }
            })
        }
        $(".pages").click(function (){ //class为pages的页面元素单击的时候
            //得到翻页的按钮id
            var flag = $(this).attr("id");
            if (flag == "first") {
                getEmpList(1);
            } else if (flag == "prev") {
                if (currPage==1){
                    getEmpList(currPage)
                }else {
                    currPage--;
                    getEmpList(currPage)
                }

            } else if (flag == "next") {
                if (currPage==tPages) {
                    getEmpList(currPage);
                }else{
                    currPage++;
                    getEmpList(currPage);
                }
            } else if (flag == "last") {
                getEmpList(tPages)
            }
        })
        getEmpList();
    })
</script>
</body>
</html>

@WebServlet("/EmpQueryPageServlet")
public class EmpQueryPageServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int pageSize = Integer.parseInt(req.getParameter("pageSize"));
        int pageNum = Integer.parseInt(req.getParameter("pageNum"));
        
        Map<String,Object> params=new HashMap<String, Object>();
        params.put("pageNum",pageSize*(pageNum-1));
        params.put("pageSize",pageSize);
        
        SqlSession session= SqlSessionFactoryUtil.getSqlSession();
        EmpDao empDao=session.getMapper(EmpDao.class);
        List<Emp> list=empDao.getEmpsByPage(params);
        int count = empDao.getEmpCount();
        //总页数
        int totalPages = PageUtil.getTotalPages(count, pageSize);
        
        Map<String,Object> maps=new HashMap<String, Object>();
        maps.put("empList",list);
        maps.put("pageNum",pageNum);
        maps.put("pageSize",pageSize);
        maps.put("totalPages", totalPages);
        JsonUtil.getJson(req, resp, maps);
        
        
        
    }
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
}

public interface EmpDao {
    List<Emp> getAllEmps();
    
    void insertEmps(Emp emp);
    
    void updateEmps(Emp emp);
    
    Emp getEmpById(int empno);
    
    List<Emp> getEmpBySalAndDept(Emp emp);
    
    List<Emp> getEmpBySalOrDept(Emp emp);
    
    int delEmps(int[] arrays);
    
    List<Emp> getEmpsByPage(Map<String,Object> params);
    
    int getEmpCount();
    
    
}

    <select id="getEmpsByPage" parameterType="java.util.Map" resultType="emp">
        select * from emp order by empno
        limit #{pageNum},#{pageSize}

    </select>

    <select id="getEmpCount" resultType="int">
        select count(1) from emp
    </select>

封装的两个工具类

public class JsonUtil {
    /**
     * 其他类型转json
     * @param request
     * @param response
     * @param obj
     */
    public static void getJson(HttpServletRequest request, HttpServletResponse response, Object obj) {
        response.setContentType("text/html;charset=UTF-8");
        
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", -10);
        PrintWriter out = null;
        try {
            out = response.getWriter();
            String jsonStr = JSON.toJSONString(obj);
            out.print(jsonStr);
            out.flush();
            
        } catch (IOException e) {
            throw new RuntimeException(e);
        } finally {
            out.close();
        }
        
        
    }
}

public class PageUtil {
    public static int getTotalPages(int count, int pageSize) {
        
        //总页数
        int totalPages = 0;
        //三元运算符
        if (count % pageSize == 0) {
            totalPages = count / pageSize;
        } else {
            totalPages = (count / pageSize) + 1;
        }
        return totalPages;
    }
}