html通过Ajax异步交互实现分页

模拟百度分页（前5后4）

1. 定义一个页面的JavaBean，作为数据传输对象（DTO）

public class PageBean<T> {
    
    
    private int totalCount; //总记录数
    private int totalPage;  //总页数
    private int currentPage;//当前页码
    private int pageSize;   //每页显示的条数
    private List<T> list;   //每页要显示的数据

    public int getTotalCount() {
    
    
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
    
    
        this.totalCount = totalCount;
    }

    public int getTotalPage() {
    
    
        return totalPage;
    }

    public void setTotalPage(int totalPage) {
    
    
        this.totalPage = totalPage;
    }

    public int getCurrentPage() {
    
    
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
    
    
        this.currentPage = currentPage;
    }

    public int getPageSize() {
    
    
        return pageSize;
    }

    public void setPageSize(int pageSize) {
    
    
        this.pageSize = pageSize;
    }

    public List<T> getList() {
    
    
        return list;
    }

    public void setList(List<T> list) {
    
    
        this.list = list;
    }
}

2. JS代码部分,通过Ajax技术把当前页码，与显示条数数传给后台，后台把呈现在页面的数据传回来，动态在页面显示，定义一个load方法，用于加载页面的

function load(cid,currentPage,rname){
    
    
           //发送ajax请求，请求pageQueryServlet,传递cid
           $.get("pageQueryServlet",{
    
    cid:cid,currentPage:currentPage,rname:rname},function (pb) {
    
    
               //解析Pagebean数据，展示到页面上
               //分页工具条数据展示
               //1.1展示总页码和总记录数
               $("#totalPage").html(pb.totalPage);
               $("#totalCount").html(pb.totalCount);
               var lis="";
               var first=' <li οnclick="javascript:load('+cid+',1,\''+rname+'\')"><a href="javascript:void(0)">首页</a></li>';
               //计算上一页的页码
               var beforeNum=pb.currentPage-1;
               if(beforeNum<=0){
    
    
                   breforNum=1;
               }
               var pre='<li οnclick="javascript:load('+cid+','+beforeNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
               lis+=first;
               lis+=pre;
               //1.2展示分页页码
               /*
               一共展示10个页码，能够达到前5后4的效果
               如果前面不够5个，后面补齐总数到10个
               如果后面不足4个，前边补齐总数到10个
               */
               //定义开始位置 begin，结束位置 end
               var begin;
               var end;
               //要显示10个页码
               if(pb.totalPage<10){
    
    
                   //如果总页码都没有10页，就显示全部
                   begin=1;
                   end=pb.totalPage;
               }else{
    
    
                   //总页码超过10页
                   begin=pb.currentPage-5;
                   end=pb.currentPage+4;
                   //如果前边不够5个，后边补齐10个
                   if(begin<1){
    
    
                       begin=1;
                       end=begin+9;
                   }
                   //如果后边不足4个，前面补齐10个
                   if(end>pb.totalPage){
    
    
                       end=pb.totalPage;
                       begin=end-9;
                   }
               }
               for(var i=begin;i<=end;i++){
    
    
                   var li;
                   //判断当前页码是否等于i
                   //创建不同格式的页码li
                   if(pb.currentPage==i){
    
    
                       li=' <li class="curPage" οnclick="javascript:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
                   }else{
    
    
                       li=' <li οnclick="javascript:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
                   }
                   lis+=li;
               }
               var nextPage=pb.currentPage+1;
               if(nextPage>pb.totalPage){
    
    
                   nextPage=totalPage;
               }
               var next=' <li οnclick="javascript:load('+cid+','+nextPage+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">下一页</a></li>';
               var last='<li οnclick="javascript:load('+cid+','+pb.totalPage+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">末页</a></li>';
               lis+=next;
               lis+=last;
               $("#pageNum").html(lis);
               //列表数据展示
               var route_lis="";
               for(var i=0;i<pb.list.length;i++){
    
    
                   //获取 {rid:1,rname:"xxx"}
                   var route= pb.list[i];
                   var li='<li>\n' +
                       '       <div class="img"></div>\n' +
                       '       <div class="text1">\n' +
                       '       <p>'+route.rname+'</p>\n' +
                       '        <br/>\n' +
                       '         <p>'+route.routeIntroduce+'</p>\n' +
                       '      </div>\n' +
                       '          <div class="price">\n' +
                       '        <p class="price_num">\n' +
                       '          <span>&yen;</span>\n' +
                       '          <span>'+route.price+'</span>\n' +
                       '          <span>起</span>\n' +
                       '          </p>\n' +
                       '           <p><a href="route_detail.html?rid='+route.rid+'">查看详情</a></p>\n' +
                       '            </div>\n' +
                       '          </li>';
                   route_lis+=li;
               }
               $("#route").html(route_lis);
               //定位到页面顶部
               window.scrollTo(0,0);
           });

3. 定义一个servlet，用于接收当前页码，显示条数，查询出一个PageBean对象序列化为JSON数据传到前台

//分页Servlet
@WebServlet("/pageQueryServlet")
public class PageQueryServlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
    //1.接收参数
        String currentPageStr = request.getParameter("currentPage");
        String pageSizeStr = request.getParameter("pageSize");
        String cidStr=request.getParameter("cid");
        //接收rname，线路名称
        String rname = request.getParameter("rname");
        rname=new String(rname.getBytes("iso-8859-1"),"utf-8");
        //2.处理参数
        int cid=0;
        if(cidStr!=null&&cidStr.length()>0&& !"null".equals(cidStr)){
    
    
            cid=Integer.parseInt(cidStr);
        }
        int currentPage=0;//当前页码，如果不传值，默认为第一页
        if(currentPageStr!=null&&currentPageStr.length()>0){
    
    
            currentPage=Integer.parseInt(currentPageStr);
        }else{
    
    
            currentPage=1;
        }
        int pageSize=0;//每页显示条数，如果不传值，默认每页显示5条记录
        if(pageSizeStr!=null&&pageSizeStr.length()>0){
    
    
            pageSize=Integer.parseInt(pageSizeStr);
        }else{
    
    
            pageSize=5;
        }
        //3.调用service查询出PageBean对象
        RouteService service=new RouteServiceImpl();
        PageBean<Route> pb = service.pageQuery(cid, currentPage, pageSize,rname);
        //4.将PageBean对象序列化为json然后返回给html
        ObjectMapper mapper=new ObjectMapper();
        response.setContentType("application/json;charset=utf-8");
        mapper.writeValue(response.getOutputStream(),pb);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
    doPost(request,response);
    }
}

4. 效果显示