旅游网（5）-------------- 旅游线路的分页展示

旅游线路的分页展示

点击了不同的分类后，将来看到的旅游线路不一样的。通过分析数据库表结构，旅游线路表和分类表时一个多对一的关系。

解决获取cid问题

header.html

var li = '<li><a href="route_list.html?cid='+data[i].cid+'">'+data[i].cname+'</a></li>';

 @Override
    public List<Category> findAll() {
        //1.从redis中查询，需要获取Jedis客户端
        //获取Jedis客户端
        Jedis jedis = JedisUtil.getJedis();
        //因为想要获得的数据具有顺序，所以使用sortedset排序查询
//        Set<String> category = jedis.zrange("category", 0, -1);
        //为了实现跳转问题，所以必须把分数也保存，传递
        //查询sortedset中的分数(cid)和值(cname)
        Set<Tuple> category = jedis.zrangeWithScores("category", 0, -1);


        //2.判断查询的集合是否为空
        List<Category> all = null;
        if (category == null || category.size() == 0){
            System.out.println("从数据库查询");
            //3.如果为空,需要从数据库查询,在将数据存入redis
            //从数据库查询
            all = categoryDao.findAll();
            //将集合数据存储到redis的名为category的key的sortedset里面去
            //sortedset里面的分数使用id
            for (int i = 0; i < all.size(); i++) {
                //cid分数，cname内容
                jedis.zadd("category",all.get(i).getCid(),all.get(i).getCname());
            }

        }else {
            System.out.println("从redis去查询");
            //访问的是category,而category又是set集合，但是序列化的时候拿到的是list集合
            //所以的把set集合里面的数据存储到list集合里面去，进行数据结构的统一
            all = new ArrayList<Category>();
            for(Tuple tuple:category){
                Category c = new Category();
                c.setCname(tuple.getElement());
                c.setCid((int)tuple.getScore());
                all.add(c);
            }
        }

        //4.如果不为空，缓存有数据。
        return all;
    }

取出cid(传递)

location有一个属性search：设置或返回从问号(?)开始的URL (查询部分)。

route_list.html

<script>
    //location有一个属性**search**：设置或返回从问号(?)开始的URL (查询部分)。
    $(function (){
        //获取cid
       var search = location.search;//?id=5
       var id = search.split("=")[1];//5
    });
</script>

根据id(cid)查询不同类别的旅游线路数据

分页展示

分析

首先需要创建pageBean对象

客户端代码

全部代码

route_list.html

<script>
    //location有一个属性:search：设置或返回从问号(?)开始的URL (查询部分)。
    $(function (){
        //获取cid
        var search = location.search;//?id=5
        var cid = search.split("=")[1];//5
        //当页码加载完成后，调用load方法，发送ajax请求加载数据
        load(cid);
    });
    function load(cid,currentPage){
        //发送ajax请求，请求route/pageQuery，传递cid
        $.get("route/pageQuery",{cid:cid,currentPage:currentPage},function (pb){
            //解析pagebean数据，展示到页面上
            //1.分页工具条数的展示
            //展示总页码和总记录数
            $("#totalPage").html(pb.totalPage);
            $("#totalCount").html(pb.totalCount);
            /*
            <li><a href="">首页</a></li>
                        <li class="threeword"><a href="#">上一页</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li><a href="#">7</a></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#">9</a></li>
                        <li><a href="#">10</a></li>
                        <li class="threeword"><a href="javascript:;">下一页</a></li>
                        <li class="threeword"><a href="javascript:;">末页</a></li>
             */
            var lis = "";
            //上一页和首页
            //首页就是没有i的值，或者是i等于1
            var firstPage = '<li  οnclick="javascript:load('+cid+')"><a href="javascript:void(0)">首页</a></li>';
            //计算上一页的页码
            var beforeNum = pb.currentPage - 1;
            if (beforeNum <= 0){
                beforeNum = 1;
            }
            var beforePage = '<li οnclick="javascript:load('+cid+','+beforeNum+')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
            lis += firstPage;
            lis += beforePage;

            //展示10条分页页码
            /*
                1.一共展示10个页码，能够达到前5后4的效果
                2.如果前边不够5个，后边补齐10个
                3.如果后边不足4个，前边补齐10个
            */
            // 定义开始位置begin,结束位置 end
            var begin;//开始位置
            var end;//加结束位置
            //1.一共展示10个页码，能够达到前5后4的效果
            if (pb.totalPage < 10){
                //总页码不够10页
                begin = 1;
                end = pb.totalPage;
            }else {
                //总页码超过10页,达到前5后4的效果
                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
                if(pb.currentPage == i){
                    //添加样式
                    var li = '<li class="curPage" οnclick="javascript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a>';
                }else {
                    //创建页码的li
                    // var li = '<li><a href="javascript:load('+cid+','+i+')">'+i+'</a>';
                    //这样修改后可以实现点击li实现跳转，只需要点击框就可以了，不然的话，必须得点击数字才可以
                    var li = '<li οnclick="javascript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a>';
                }
                //拼接字符串
                lis += li;
            }

            /*
            //展示全部分页页码
            for (var i = 1; i <= pb.totalPage; i++) {
                //添加点击时的样式，实现选择该框时出现选中的结果
                var li;
                //判断当前页面是否等于i
                if(pb.currentPage == i){
                    //添加样式
                    var li = '<li class="curPage" οnclick="javascript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a>';
                }else {
                    //创建页码的li
                    // var li = '<li><a href="javascript:load('+cid+','+i+')">'+i+'</a>';
                    //这样修改后可以实现点击li实现跳转，只需要点击框就可以了，不然的话，必须得点击数字才可以
                    var li = '<li οnclick="javascript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a>';
                }
                //拼接字符串
                lis += li;
            }
            */
            //尾页
            var lastPage = '<li οnclick="javascript:load('+cid+','+pb.totalPage+')" class="threeword"><a href="javascript:void(0)">末页</a></li>';
            //计算下一页的页码
            var nextNum = pb.currentPage + 1;
            if (nextNum > pb.totalPage){
                nextNum = pb.totalPage;
            }
            var nextPage = '<li  οnclick="javascript:load('+cid+','+nextNum+')" class="threeword"><a href="javascript:void(0)">下一页</a></li>';
            lis += nextPage;
            lis += lastPage;
            //将lis内容设置到ul
            $("#pageNum").html(lis);

            /*
            <li>
                <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                <div class="text1">
                    <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                    <br/>
                    <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                </div>
                <div class="price">
                    <p class="price_num">
                        <span>&yen;</span>
                        <span>299</span>
                        <span>起</span>
                    </p>
                    <p><a href="route_detail.html">查看详情</a></p>
                </div>
            </li>
             */
            //2.列表数据展示
            var route_lis = "";
            for (var i = 0; i < pb.list.length; i++) {
                //获取JSON里面的list数组，
                // 因为其所有的商品信息都是封装在list里面，
                // 并且每一个索引里面都有一整个商品信息
                //如：{rid:1,rname:..,price:....}
                var route = pb.list[i];
                var li = '<li>\n' +
                    '                    <div class="img"><img src="'+route.rimage+'" style="width: 299px;" alt=""></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_li里面的li的内容添加进ul里面
            $("#route").html(route_lis);
            //scrollTo(xpos,ypos)方法实现，点击选择的页面时，跳转到网页的首部
            /*
                定义：把内容滚动到指定的坐标。
                xpos：必需。要在窗口文档显示区左上角显示的文档的x坐标。
                ypos：必需。 要在窗口文档显示区左上角显示的文档的y坐标。
             */
            //定位到页面顶部
            window.scrollTo(0,0);
        });
    }
</script>

页码

页码整体显示

<script>
    //location有一个属性:search：设置或返回从问号(?)开始的URL (查询部分)。
    $(function (){
        //获取cid
       var search = location.search;//?id=5
        var cid = search.split("=")[1];//5
        //发送ajax请求，请求route/pageQuery，传递cid
        $.get("route/pageQuery",{cid:cid},function (pb){
            //解析pagebean数据，展示到页面上
            //1.分页工具条数的展示
            //展示总页码和总记录数
            $("#totalPage").html(pb.totalPage);
            $("#totalCount").html(pb.totalCount);
            /*
            <li><a href="">首页</a></li>
                        <li class="threeword"><a href="#">上一页</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li><a href="#">7</a></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#">9</a></li>
                        <li><a href="#">10</a></li>
                        <li class="threeword"><a href="javascript:;">下一页</a></li>
                        <li class="threeword"><a href="javascript:;">末页</a></li>
             */
            var lis = "";
            //上一页和首页
            var firstPage = '<li><a href="">首页</a></li>';
            var beforePage = '<li class="threeword"><a href="#">上一页</a></li>';
            lis += firstPage;
            lis += beforePage;
            //展示分页页码
            for (var i = 1; i <= pb.totalPage; i++) {
                //创建页码的li
                var li = '<li><a href="#">'+i+'</a>';
                //拼接字符串
                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.列表数据展示
            ......
		});
    });
</script>

页面跳转功能

全部代码：

<script>
    //location有一个属性:search：设置或返回从问号(?)开始的URL (查询部分)。
    $(function (){
        //获取cid
        var search = location.search;//?id=5
        var cid = search.split("=")[1];//5
        //当页码加载完成后，调用load方法，发送ajax请求加载数据
        load(cid);
    });
    function load(cid,currentPage){
        //发送ajax请求，请求route/pageQuery，传递cid
        $.get("route/pageQuery",{cid:cid,currentPage:currentPage},function (pb){
            //解析pagebean数据，展示到页面上
            //1.分页工具条数的展示
            //展示总页码和总记录数
            $("#totalPage").html(pb.totalPage);
            $("#totalCount").html(pb.totalCount);
            /*
            <li><a href="">首页</a></li>
                        <li class="threeword"><a href="#">上一页</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li><a href="#">7</a></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#">9</a></li>
                        <li><a href="#">10</a></li>
                        <li class="threeword"><a href="javascript:;">下一页</a></li>
                        <li class="threeword"><a href="javascript:;">末页</a></li>
             */
            var lis = "";
            //上一页和首页
            //首页就是没有i的值，或者是i等于1
            var firstPage = '<li  οnclick="javascript:load('+cid+')"><a href="javascript:void(0)">首页</a></li>';
            //计算上一页的页码
            var beforeNum = pb.currentPage - 1;
            if (beforeNum <= 0){
                beforeNum = 1;
            }
            var beforePage = '<li οnclick="javascript:load('+cid+','+beforeNum+')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
            lis += firstPage;
            lis += beforePage;
            //展示分页页码
            for (var i = 1; i <= pb.totalPage; i++) {
                //添加点击时的样式，实现选择该框时出现选中的结果
                var li;
                //判断当前页面是否等于i
                if(pb.currentPage == i){
                    //添加样式
                    var li = '<li class="curPage" οnclick="javascript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a>';
                }else {
                    //创建页码的li
                    // var li = '<li><a href="javascript:load('+cid+','+i+')">'+i+'</a>';
                    //这样修改后可以实现点击li实现跳转，只需要点击框就可以了，不然的话，必须得点击数字才可以
                    var li = '<li οnclick="javascript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a>';
                }
                //拼接字符串
                lis += li;
            }
            var lastPage = '<li οnclick="javascript:load('+cid+','+pb.totalPage+')" class="threeword"><a href="javascript:void(0)">末页</a></li>';
            //计算下一页的页码
            var nextNum = pb.currentPage + 1;
            if (nextNum > pb.totalPage){
                nextNum = pb.totalPage;
            }
            var nextPage = '<li  οnclick="javascript:load('+cid+','+nextNum+')" class="threeword"><a href="javascript:void(0)">下一页</a></li>';
            lis += nextPage;
            lis += lastPage;
            //将lis内容设置到ul
            $("#pageNum").html(lis);

            /*
            <li>
                <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                <div class="text1">
                    <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                    <br/>
                    <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                </div>
                <div class="price">
                    <p class="price_num">
                        <span>&yen;</span>
                        <span>299</span>
                        <span>起</span>
                    </p>
                    <p><a href="route_detail.html">查看详情</a></p>
                </div>
            </li>
             */
            //2.列表数据展示
            var route_lis = "";
            for (var i = 0; i < pb.list.length; i++) {
                //获取JSON里面的list数组，
                // 因为其所有的商品信息都是封装在list里面，
                // 并且每一个索引里面都有一整个商品信息
                //如：{rid:1,rname:..,price:....}
                var route = pb.list[i];
                var li = '<li>\n' +
                    '                    <div class="img"><img src="'+route.rimage+'" style="width: 299px;" alt=""></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_li里面的li的内容添加进ul里面
            $("#route").html(route_lis);
        });
    }
</script>

具体实现功能

• 这些都依靠load方法

function load(cid,currentPage){
    //发送ajax请求，请求route/pageQuery，传递cid
    $.get("route/pageQuery",{cid:cid,currentPage:currentPage},function (pb){
        //解析pagebean数据，展示到页面上
        //1.分页工具条数的展示
        //展示总页码和总记录数
        $("#totalPage").html(pb.totalPage);
        $("#totalCount").html(pb.totalCount);
        /*
        <li><a href="">首页</a></li>
                    <li class="threeword"><a href="#">上一页</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                    <li><a href="#">7</a></li>
                    <li><a href="#">8</a></li>
                    <li><a href="#">9</a></li>
                    <li><a href="#">10</a></li>
                    <li class="threeword"><a href="javascript:;">下一页</a></li>
                    <li class="threeword"><a href="javascript:;">末页</a></li>
         */
        var lis = "";
        //上一页和首页
        //首页就是没有i的值，或者是i等于1
        var firstPage = '<li  onclick="javascript:load('+cid+')"><a href="javascript:void(0)">首页</a></li>';
        //计算上一页的页码
        var beforeNum = pb.currentPage - 1;
        if (beforeNum <= 0){
            beforeNum = 1;
        }
        var beforePage = '<li onclick="javascript:load('+cid+','+beforeNum+')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
        lis += firstPage;
        lis += beforePage;
        //展示分页页码
        for (var i = 1; i <= pb.totalPage; i++) {
            //添加点击时的样式，实现选择该框时出现选中的结果
            var li;
            //判断当前页面是否等于i
            if(pb.currentPage == i){
                //添加样式
                var li = '<li class="curPage" onclick="javascript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a>';
            }else {
                //创建页码的li
                // var li = '<li><a href="javascript:load('+cid+','+i+')">'+i+'</a>';
                //这样修改后可以实现点击li实现跳转，只需要点击框就可以了，不然的话，必须得点击数字才可以
                var li = '<li onclick="javascript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a>';
            }
            //拼接字符串
            lis += li;
        }
        var lastPage = '<li onclick="javascript:load('+cid+','+pb.totalPage+')" class="threeword"><a href="javascript:void(0)">末页</a></li>';
        //计算下一页的页码
        var nextNum = pb.currentPage + 1;
        if (nextNum > pb.totalPage){
            nextNum = pb.totalPage;
        }
        var nextPage = '<li  onclick="javascript:load('+cid+','+nextNum+')" class="threeword"><a href="javascript:void(0)">下一页</a></li>';
        lis += nextPage;
        lis += lastPage;
        //将lis内容设置到ul
        $("#pageNum").html(lis);

        /*
        <li>
            <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
            <div class="text1">
                <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                <br/>
                <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
            </div>
            <div class="price">
                <p class="price_num">
                    <span>&yen;</span>
                    <span>299</span>
                    <span>起</span>
                </p>
                <p><a href="route_detail.html">查看详情</a></p>
            </div>
        </li>
         */
        //2.列表数据展示
        var route_lis = "";
        for (var i = 0; i < pb.list.length; i++) {
            //获取JSON里面的list数组，
            // 因为其所有的商品信息都是封装在list里面，
            // 并且每一个索引里面都有一整个商品信息
            //如：{rid:1,rname:..,price:....}
            var route = pb.list[i];
            var li = '<li>\n' +
                '                    <div class="img"><img src="'+route.rimage+'" style="width: 299px;" alt=""></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_li里面的li的内容添加进ul里面
        $("#route").html(route_lis);
    });
                                           
}

• 点击某一页跳转

//展示分页页码
for (var i = 1; i <= pb.totalPage; i++) {
    //添加点击时的样式，实现选择该框时出现选中的结果
    var li;
    //判断当前页面是否等于i
    if(pb.currentPage == i){
        //添加样式
        var li = '<li class="curPage" onclick="javascript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a>';
    }else {
        //创建页码的li
        // var li = '<li><a href="javascript:load('+cid+','+i+')">'+i+'</a>';
        //这样修改后可以实现点击li实现跳转，只需要点击框就可以了，不然的话，必须得点击数字才可以
        var li = '<li onclick="javascript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a>';
    }
    //拼接字符串
    lis += li;
}

• 上一页

• 首页

//上一页和首页
//首页就是没有i的值，或者是i等于1
var firstPage = '<li  onclick="javascript:load('+cid+')"><a href="javascript:void(0)">首页</a></li>';
//计算上一页的页码
var beforeNum = pb.currentPage - 1;
if (beforeNum <= 0){
    beforeNum = 1;
}
var beforePage = '<li onclick="javascript:load('+cid+','+beforeNum+')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';

• 尾页

• 下一页

//尾页
var lastPage = '<li onclick="javascript:load('+cid+','+pb.totalPage+')" class="threeword"><a href="javascript:void(0)">末页</a></li>';
//计算下一页的页码
var nextNum = pb.currentPage + 1;
if (nextNum > pb.totalPage){
    nextNum = pb.totalPage;
}
var nextPage = '<li  onclick="javascript:load('+cid+','+nextNum+')" class="threeword"><a href="javascript:void(0)">下一页</a></li>';

实现页码的折叠

//展示10条分页页码
/*
    1.一共展示10个页码，能够达到前5后4的效果
    2.如果前边不够5个，后边补齐10个
    3.如果后边不足4个，前边补齐10个
*/
// 定义开始位置begin,结束位置 end
var begin;//开始位置
var end;//加结束位置
//1.一共展示10个页码，能够达到前5后4的效果
if (pb.totalPage < 10){
    //总页码不够10页
    begin = 1;
    end = pb.totalPage;
}else {
    //总页码超过10页,达到前5后4的效果
    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
    if(pb.currentPage == i){
        //添加样式
        var li = '<li class="curPage" onclick="javascript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a>';
    }else {
        //创建页码的li
        // var li = '<li><a href="javascript:load('+cid+','+i+')">'+i+'</a>';
        //这样修改后可以实现点击li实现跳转，只需要点击框就可以了，不然的话，必须得点击数字才可以
        var li = '<li onclick="javascript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a>';
    }
    //拼接字符串
    lis += li;
}

商品显示

/*
    <li>
        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
        <div class="text1">
            <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
            <br/>
            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
        </div>
        <div class="price">
            <p class="price_num">
                <span>&yen;</span>
                <span>299</span>
                <span>起</span>
            </p>
            <p><a href="route_detail.html">查看详情</a></p>
        </div>
    </li>
     */
    //2.列表数据展示
    var route_lis = "";
    for (var i = 0; i < pb.list.length; i++) {
        //获取JSON里面的list数组，
        // 因为其所有的商品信息都是封装在list里面，
        // 并且每一个索引里面都有一整个商品信息
        //如：{rid:1,rname:..,price:....}
        var route = pb.list[i];
        var li = '<li>\n' +
'                    <div class="img"><img src="'+route.rimage+'" style="width: 299px;" alt=""></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_li里面的li的内容添加进ul里面
    $("#route").html(route_lis);

滚动到页面顶部

//scrollTo(xpos,ypos)方法实现，点击选择的页面时，跳转到网页的首部
/*
    定义：把内容滚动到指定的坐标。
    xpos：必需。要在窗口文档显示区左上角显示的文档的x坐标。
    ypos：必需。 要在窗口文档显示区左上角显示的文档的y坐标。
 */
//定位到页面顶部
window.scrollTo(0,0);

服务器端代码

1.创建PageBean对象

2.RouteServlet

3.RouteService

4.RouteDao

1.PageBean对象

/**
 * 分页对象
 */
public class PageBean<T> {
    //数据流查询的数据：totalCount、list集合
    //pageSize、currentPage：是客户端提交的
    //totalPage:可以计算出来的，通过totalCount和pageSize

    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.RouteServlet

@WebServlet("/route/*")
public class RouteServlet extends BaseServlet {
    private RouteService routeService = new RouteServiceImpl();
    /**
     * 分页查询
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接收参数
        //需要将currentPageStr转为int类型的网service里面传
        String currentPageStr = request.getParameter("currentPage");
        String pageSizeStr = request.getParameter("pageSize");
        String cidStr = request.getParameter("cid");

        //处理参数
        int cid = 0;//前面所获取的类别id
        if (cidStr != null && cidStr.length() > 0){
            cid = Integer.parseInt(cidStr);
        }
        int pageSize = 0;//每页显示条数，如果不传递，默认每页显示5条记录
        if (pageSizeStr != null && pageSizeStr.length() > 0){
            pageSize = Integer.parseInt(pageSizeStr);
        }else {
            pageSize = 5;
        }
        int currentPage = 0;//当前页码，如果不传递，则默认为第一页
        if (currentPageStr != null && currentPageStr.length() > 0){
            currentPage = Integer.parseInt(currentPageStr);
        }else {
            currentPage = 1;
        }
        //3.调用service查询PageBean对象
        PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize);
        //4.将pageBean对象序列化为json,返回
        writeValue(pb,response);
    }

}

3.RouteService

public interface RouteService {
    /**
     * 根据类别进行分页查询
     * @param cid
     * @param currentPage
     * @param pageSize
     * @return
     */
    public PageBean<Route> pageQuery(int cid,int currentPage,int pageSize);
}

public class RouteServiceImpl implements RouteService {
    RouteDao routeDao = new RouteDaoImpl();
    @Override
    public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize) {
        //封装一个PageBean对象，并将这个对象返回
        //数据流查询的数据：totalCount、list集合
        //pageSize、currentPage：是客户端提交的
        //totalPage:可以计算出来的，通过totalCount和pageSize
        PageBean<Route> pb = new PageBean<Route>();
        //设置当前页
        pb.setCurrentPage(currentPage);
        //设置每页显示的条数
        pb.setPageSize(pageSize);
        //设置总记录数
        int totalCount = routeDao.findTotalCount(cid);
        pb.setTotalCount(totalCount);
        //设置当前页显示的数据集合
        //开始的记录数
        int start = (currentPage - 1)*pageSize;
        List<Route> list = routeDao.findByPage(cid,start,pageSize);
        pb.setList(list);
        //设置总页数 = 总记录数/每页显示条数
        int totalPage = totalCount % pageSize == 0 ? totalCount/pageSize : (totalCount/pageSize)+1;
        pb.setTotalPage(totalPage);

        return pb;
    }
}

4.RouteDao

public interface RouteDao {
    /**
     * 根据cid查询总记录数
     */
    public int findTotalCount(int cid);
    /**
     * 根据cid、start、pageSize查询当前页的数据集合，start代表从哪里开始，因为SQL
     * 里面的limit ?,? ，第一个？：从哪一个记录数开始
     */
    public List<Route> findByPage(int cid,int start,int pageSize);
}

public class RouteDaoImpl implements RouteDao {
    //使用template去执行sql
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    @Override
    public int findTotalCount(int cid) {
        String sql = "select count(*) from tab_route where cid = ?";
        //返回一个Integer.class，再去给一个cid的参数
        return template.queryForObject(sql,Integer.class,cid);
    }

    @Override
    public List<Route> findByPage(int cid, int start, int pageSize) {
        String sql = "select * from tab_route where cid = ? limit ? , ?";
        return template.query(sql,new BeanPropertyRowMapper<>(Route.class),cid,start,pageSize);
    }
}