分页显示

一、分析

1.1PageBean内的存储变量

//总记录数，
int totalCount;
//总页数
int totalPage;
//当前页码
int currentPage;
//每页显示的条数
int pageSize;
//每页战术的数据集合
List list;

totalCount，和list可通过数据库查询

totalPage需要计算获得

当前页码和每页下

1.2客户端页面

1. 客户端页面发送ajax请求PageBean数据

2. 携带

   • currentPage(当前页码)

   • pageSize(每页显示的条目)

   • cid(分页id)

二、代码编写

2.1服务器编写

2.1.1建立RouteServlet, 编写 分页查询功能

​ 1.接受客户端传来的

• currentPage(当前页码)
• pageSize(每页显示的条目)
• cid(分页id)

String currentPageStr = request.getParameter("currentPage");
String pageSizeStr = request.getParameter("pageSize");
String cidStr

2.处理参数，并且添加默认值

int currentPage = 0;
if(currentPageStr != null && currentPageStr.length()>0){
    currentPage = Integer.parseInt(currentPageStr);
}
else {
    //不传参，默认当前为第一页
    currentPage = 1;
}
int pageSize = 0;
if(pageSizeStr != null && pageSizeStr.length()>0){
    pageSize = Integer.parseInt(pageSizeStr);
}
else {
    //不传参，每页最大的数据为5个
    pageSize = 5;
}
int cid = 0;
if(cidStr != null && cidStr.length()>0){
    cid = Integer.parseInt(cidStr);
}

3.调用Service查询pageBean

 RouteService routeService = new RouteServiceImpl();
 PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize);

4.格式化为json响应给客户端

writeValue(pb,response);

方法：

/**
 * 直接将传入的对象序列化为json，并且写回客户端
 * @param obj
 */
public void writeValue(Object obj,HttpServletResponse response) throws IOException {
    ObjectMapper mapper = new ObjectMapper();
    response.setContentType("application/json;charset=utf-8");
    mapper.writeValue(response.getOutputStream(),obj);
}

2.1.2创建RouteService和RouteDao

1.DAO

方法一：查询总记录数

方法二：查询每页的数据集合

/**
     * 查询总记录数
     * @param cid
     * @return
     */
    @Override
    public int findTotalCount(int cid) {
        //编写sql
        String sql = "select count(*) from tab_route where cid =?";
        //执行返回int型
        Integer totalCount = template.queryForObject(sql, Integer.class, cid);
        return totalCount;
    }

/**
 * 查询每页数据
 * @param cid
 * @param start
 * @param pageSize
 * @return
 */
@Override
public List<Route> findByPage(int cid, int start, int pageSize) {
    String sql = "select * from tab_route where cid =? limit ?, ?";
    //执行返回List
    List<Route> routeList = template.query(sql, new BeanPropertyRowMapper<Route>(Route.class), cid, start, pageSize);
    return routeList;
}

2.Service

通过cid，返回不同的PageBean对象

//1.创建空pageBean
PageBean<Route> pageBean = new PageBean<Route>();

//2.设置属性
pageBean.setCurrentPage(currentPage);
pageBean.setPageSize(pageSize);
int totalCount = routeDao.findTotalCount(cid);
pageBean.setTotalCount(totalCount);
//总页数 = 总记录数/每页记录数 ， 除不开加一
int totalPage = totalCount%pageSize == 0?totalCount/pageSize:(totalCount/pageSize)+1;
pageBean.setTotalPage(totalPage);
//Route数据集合
//开始记录为 （当前页码-1）*每页记录数
int start = (currentPage - 1)*pageSize;
List<Route> routeList = routeDao.findByPage(cid, start, pageSize);
pageBean.setList(routeList);

//3.返回pageBean
return pageBean;

2.2客户端编写

1. 回显服务端相应的数据

   ​ * 总页码

   ​ * 总记录数

2. 分页工具条展示

3. 列表数据展示

$(function () {
    var search = location.search;
    //alert(search);//?id=5
    // 切割字符串，拿到第二个值
    var cid = search.split("=")[1];

    //当页码加载完成后，调用load方法，发送ajax请求加载数据
    load(cid);
});

function load(cid ,currentPage){
    //发送ajax请求，请求route/pageQuery,传递cid
    $.get("route/pageQuery",{cid:cid,currentPage:currentPage},function (pb) {
        //解析pagebean数据，展示到页面上

        //1.分页工具条数据展示
        //1.1 展示总页码和总记录数
        $("#totalPage").html(pb.totalPage);
        $("#totalCount").html(pb.totalCount);
        var lis = "";

                var fristPage = '<li onclick="javascipt:load('+cid+')"><a href="javascript:void(0)">首页</a></li>';

                //计算上一页的页码
                var beforeNum =  pb.currentPage - 1;
                if(beforeNum <= 0){
                    beforeNum = 1;
                }

                var beforePage = '<li  onclick="javascipt:load('+cid+','+beforeNum+')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';

                lis += fristPage;
                lis += beforePage;
                //1.2 展示分页页码
                /*
                    1.一共展示10个页码，能够达到前5后4的效果
                    2.如果前边不够5个，后边补齐10个
                    3.如果后边不足4个，前边补齐10个
                */

                // 定义开始位置begin,结束位置 end
                var begin; // 开始位置
                var end ; //  结束位置


                //1.要显示10个页码
                if(pb.totalPage < 10){
                    //总页码不够10页

                    begin = 1;
                    end = pb.totalPage;
                }else{
                    //总页码超过10页

                    begin = pb.currentPage - 5 ;
                    end = pb.currentPage + 4 ;

                    //2.如果前边不够5个，后边补齐10个
                    if(begin < 1){
                        begin = 1;
                        end = begin + 9;
                    }

                    //3.如果后边不足4个，前边补齐10个
                    if(end > pb.totalPage){
                        end = pb.totalPage;
                        begin = end - 9 ;
                    }
                }


                for (var i = begin; i <= end ; i++) {
                    var li;
                    //判断当前页码是否等于i
                    if(pb.currentPage == i){

                        li = '<li class="curPage" onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';

                    }else{
                        //创建页码的li
                        li = '<li onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
                    }
                    //拼接字符串
                    lis += li;
                }
        var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';
                var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';

                lis += nextPage;
                lis += lastPage;
        //将lis内容设置到 ul
                $("#pageNum").html(lis);
        //2.列表数据展示
                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"><img src="'+route.rimage+'" style="width: 299px;"></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">查看详情</a></p>\n' +
                        '                        </div>\n' +
                        '                    </li>';
                    route_lis += li;
                }
                $("#route").html(route_lis);

                //定位到页面顶部
                window.scrollTo(0,0);
            });

        }