Java分页显示(旅游线路)

Java分页显示(旅游线路)

分页显示

一、分析

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);
            });

        }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115202.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • C++条件运算符_位运算符

    C++条件运算符_位运算符C++条件运算符(?:)的通用格式如下:表达式1?表达式2:表达式3说明:如果表达式1为true,则整个表达式的值为表达式2的值(即,冒号左边的值);如果表达式1为false,则整个表达式的值为表达式3的值(即,冒号右边的值);C++中,条件运算符(?:)是唯一需要3个操作数的运算符。下面举个简单的例子进行说明例如:(1) inta=1; int…

  • endnote转化成纯文本后_EndNote X7如何去掉域代码生成纯文本文件

    endnote转化成纯文本后_EndNote X7如何去掉域代码生成纯文本文件满意答案czpunk2016.08.17采纳率:58%等级:9已帮助:2963人现在很多杂志都要求作者提供电子文稿。格式化后的文稿含有大量域代码,有可能与杂志社的软件不兼容,因此提交前需要去掉文稿里的域代码。方法是从Word的工具栏里进入“EndNote7.0”子菜单选择点击“RemoveFieldCodes”,出现一个提示框告诉你“该操作将创建一个新的去掉了所有域代码的Word文档,…

  • 3.Eclipse创建第一个Java项目[通俗易懂]

    3.Eclipse创建第一个Java项目[通俗易懂]1.在桌面上双击eclipse快捷键,打开软件,出现一个界面2.这个界面是选择eclipse的工作空间,简单来说就是选择Java项目放在磁盘上的哪个位置上,可以点击默认的,也可以自己创建新的文件夹,然后点击Launch3.在主页面上点击File-&gt;New-&gt;JavaProject创建Java新项目4.在弹出的窗口的Projectname位置处,输入自己项目的名称…

  • 求二叉树的最长路径_某完全二叉树按层次输出,从左到右

    求二叉树的最长路径_某完全二叉树按层次输出,从左到右Ural 大学有 N 名职员,编号为 1∼N。他们的关系就像一棵以校长为根的树,父节点就是子节点的直接上司。每个职员有一个快乐指数,用整数 Hi 给出,其中 1≤i≤N。现在要召开一场周年庆宴会,不过,没有职员愿意和直接上司一起参会。在满足这个条件的前提下,主办方希望邀请一部分职员参会,使得所有参会职员的快乐指数总和最大,求这个最大值。输入格式第一行一个整数 N。接下来 N 行,第 i 行表示 i 号职员的快乐指数 Hi。接下来 N−1 行,每行输入一对整数 L,K,表示 K 是 L 的直接

  • 体验国产Linux系统,开局就翻车了…

    体验国产Linux系统,开局就翻车了…本文转载自差评,作者差评君可能你们之前在网上看到过别人对Linux操作系统的分析,也在新闻里见过有关国产Linux操作系统的报道。那么你们肯定也见过这些帖子下面的评论区里,不断有人复述着“垃圾”、“难用”。被称作“最美操作系统”的深度OS▼我相信,很多小伙伴是想尝试一下国产Linux操作系统的,但碍于现实条件往往只能作罢。所以,Linux真的难用吗;假如说从明天开始,Windows和苹果MacOS突然不能用了,Linux…

  • 如何用正则表达式匹配汉字

    如何用正则表达式匹配汉字[\u4E00-\u9FA5\\s]+ 多个汉字,包括空格[\u4E00-\u9FA5]+ 多个汉字,不包括空格[\u4E00-\u9FA5]一个汉字

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号