Ajax实现分页

第一步先写一个分页工具类pageInfo

 下面是pageInfo的代码

public class PageInfo<T> {


    private Integer pageIndex;//当前页索引
    private Integer pageSize;//每页显示的条数
    private Integer totalCount;//总条数
    private Integer totalPage;//总页数
    private List<T> dataList;//当前页的数据集合
    public PageInfo() { }
    /**
     * 有参构造
     * @param pageIndex 当前页索引
     * @param pageSize 每页显示的条数
     * @param totalCount 总条数
     * @param dataList 当前页的数据集合
     */
    public PageInfo(Integer pageIndex, Integer pageSize, Integer totalCount,List<T> dataList) {
        this.pageIndex = pageIndex;
        this.pageSize = pageSize;
        this.totalCount = totalCount;//从数据库查询获取
        this.dataList = dataList;//从数据库查询获取
        this.totalPage=(totalCount%pageSize)==0?(totalCount/pageSize):(totalCount/pageSize+1);
    }
    public Integer getPageIndex() {
        return pageIndex;
    }
    public void setPageIndex(Integer pageIndex) {
        this.pageIndex = pageIndex;
    }
    public Integer getPageSize() {
        return pageSize;
    }
    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }
    public Integer getTotalCount() {
        return totalCount;
    }
    public void setTotalCount(Integer totalCount) {
        this.totalCount = totalCount;
    }
    public Integer getTotalPage() {
        return totalPage;
    }
    public void setTotalPage(Integer totalPage) {
        this.totalPage = totalPage;
    }
    public List<T> getDataList() {
        return dataList;
    }
    public void setDataList(List<T> dataList) {
        this.dataList = dataList;
    }


}

下面是数据库设计

 下面是实体类编写，和数据库对应上就行

---

dao层下面写sql语句，以及实现类的代码

 UserdaoImpl实现类的实现分页的代码

    @Override
    public List<shoes> findByPage(Integer pageIndex, Integer pageSize) {
        List<shoes> list=new ArrayList<>();
        Connection conn=null;
        String sql="select * from shoes  limit ?,?";
        ResultSet rs = null;
        try {
            rs=super.executeQuery(sql,pageIndex,pageSize);
            while (rs.next()) {
                //循环添加对象到集合
                list.add(new shoes(rs.getInt("sid"),rs.getString("sname"),rs.getDouble("price"),rs.getInt("quantity"),rs.getString("image"),rs.getString("introduce")));
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            DataBaseUtil.closeAll(conn,null,rs);
        }
        return list;
    }

再下面是servlet层的代码，注意这里的注解要和Ajax的路径一致

---

@WebServlet("/shoe_select")
public class shoe_select extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        UserService userService = new UserServiceimpl();
        PrintWriter out = response.getWriter();
        //********************************************************
        Integer pageIndex1=Integer.parseInt(request.getParameter("pageIndex"));
        System.out.println(pageIndex1);
        Integer pageIndex=request.getParameter("pageIndex")==null?1:Integer.parseInt(request.getParameter("pageIndex"));
        Integer pageSize=8;
        Integer totalCount = userService.getTotalCount();
        List<shoes> userList = userService.findByPage(pageIndex, pageSize);
        PageInfo<shoes> pageInfo=new PageInfo<>(pageIndex,pageSize,totalCount,userList);
        String str = JSON.toJSONString(pageInfo);
        System.out.println(str);
        out.print(str);
    }
}

下面就是在jsp里面用异步去查询数据

---

<script>
    //页面载入函数
    $(function(){
        //默认显示第1页
        myf('a');
    })
    //扩大作用域
    var pageIndex;
    var max=7;//定义100页
    //写一个方法专门控制分页
    function myf(type){
        if(type=='a'){
            //首页
            pageIndex=1;
        }
        else if(type=='b'){
            //上一页
            if(pageIndex>1){
                pageIndex--;
            }
            else{
                alert("兄die，已经是第一页了嘞");
            }
        }
        else if(type=='c'){
            //下一页
            if(pageIndex<max){
                pageIndex++;
            }
            else{
                alert("兄die，已经是最后一页了嘞");
            }
        }
        else{
            //末页
            pageIndex=max;
        }
        //ajax
        $.post("test", "pageIndex="+pageIndex, function(data) {
            $("tbody").empty();
            $(data.dataList).each(function (i,g) {
                var tr = $("<tr>\n" +
                    "          <td>" + g.sid+ "</td>\n" +
                    "          <td>" + g.introduce + "</td>\n" +
                    "          <td>" + g.quantity + "</td>\n" +
                    "          <td>" + g.price + "</td>\n" +
                    "          <td>" + g.sname + "</td>\n" +
                    "          <td>" + g.image + "</td>\n" +
                    "        </tr>");
                $("tbody").append(tr);
            });
        }, "json");
    }
</script>

<div>
    <a href="javascript:myf('a')">首页</a>&nbsp;
    <a href="javascript:myf('b')">上一页</a>&nbsp;
    <a href="javascript:myf('c')">下一页</a>&nbsp;
    <a href="javascript:myf('d')">末页</a>&nbsp;
</div>

注意这里的属性一定要和实体类对应上。最后一步就可以运行页面看效果了，

---

点击下一页的效果

---

 

 

希望能帮助到你，