Java分页显示（旅游线路）

2022-07-08 13:18:07 浏览数 (1)

分页显示

目录

  • 分页显示
    • 一、分析
      • 1.1PageBean内的存储变量
      • 1.2客户端页面
    • 二、代码编写
      • 2.1服务器编写
        • 2.1.1建立RouteServlet, 编写 分页查询功能
        • 2.1.2创建RouteService和RouteDao
          • 1.DAO
          • 2.Service
      • 2.2客户端编写

一、分析

1.1PageBean内的存储变量

代码语言：javascript复制
//总记录数，
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)
代码语言：javascript复制
String currentPageStr = request.getParameter("currentPage");
String pageSizeStr = request.getParameter("pageSize");
String cidStr

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

代码语言：javascript复制
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

代码语言：javascript复制
 RouteService routeService = new RouteServiceImpl();
 PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize);

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

代码语言：javascript复制
writeValue(pb,response);

方法：

代码语言：javascript复制
/**
 * 直接将传入的对象序列化为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

方法一：查询总记录数

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

代码语言：javascript复制
/**
     * 查询总记录数
     * @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;
    }
代码语言：javascript复制
/**
 * 查询每页数据
 * @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对象

代码语言：javascript复制
//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. 列表数据展示
代码语言：javascript复制
$(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);
            });

        }

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/115202.html原文链接：https://javaforall.cn

https java servlet 网络安全

0 人点赞