旅游网小案例:旅游线路的分页展示

• 分析表
  点击了不同的分类后，将来看到的旅游线路不一样的。通过分析数据库表结构，发现，旅游线路表和分类表是多对一的关系(所以根据分类表id就可以在旅游线路表中查询出一个线路信息集合)

查询不同分类的旅游线路sql
select * from tab_route where cid=?

类别id的传递

• 页面
• header.html

  //获取分类信息
        $.get("category/findAll", function (data) {
            var lis = '<li class="nav-active"><a href="index.html">首页</a></li>'
            //遍历数组,拼接字符串
            $(data).each(function (index, elemeth) {
                var li = '<li><a href="route_list.html?cid=' + elemeth.cid + '">' + elemeth.cname + '</a></li>'
                lis += li;
            });
            //拼接收藏排行榜的li
            lis += '<li><a href="favoriterank.html">收藏排行榜</a></li>';
            $("#category").html(lis)
        });

在生成分类列表时在跳转连接后跟上需要的参数href="route_list.html?cid=' + elemeth.cid + '"

• getParameter.js工具js

//根据传递过来的参数name获取对应的值
function getParameter(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
    var r = location.search.substr(1).match(reg);
    if (r!=null) return (r[2]); return null;
}

对获取参数的封装

• route_list.html的分页js

 $(function () {
            //获取cid
            //var search = location.search;
            //切割
            //var cid = search.split("=")[1];
            var cid = getParameter("cid");
            load(cid);
        });

        function load(cid, currentPage) {
            //发送ajax请求,请求route/pageQuery,传递cid
            $.get("route/pageQuery", {cid: cid, currentPage: currentPage}, function (pb) {
                //解析pageBean数据

                //分页工具条数据展示
                //展示总页码和总记录数
                $("#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 fristPage = '<li  οnclick="javascript:load(' + cid + ',' + 1 + ')"><a href="javascript:void(0)">首页</a></li>';
                var beforeNum = pb.currentPage - 1;
                if (beforeNum <= 0) {
                    beforeNum = 1;
                }
                var beforePage = '<li class="threeword"  οnclick="javascript:load(' + cid + ',' + beforeNum + ')"><a href="javascript:void(0)">上一页</a></li>';
                lis += fristPage;
                lis += beforePage;
                /*
                    1.一共展示10个页码,能够达到前5后4的效果
                    2.如果前边不够5个,后面补齐10个
                    3.如果后边不足4个,前边补齐10个
                 */
                //定义开始位置begin,结束位置 end
                var begin;//开始位置
                var end;//结束位置

                //不够10个页码
                if (pb.totalPage < 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;
                    }
                    if (end > pb.totalPage) {
                        end = pb.totalPage;
                        begin = end - 9;
                    }
                }

                for (var i = begin; i <= end; i++) {
                    var li;
                    if (pb.currentPage == i) {
                        li = '<li class="curPage" οnclick="javascript:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';
                    } else {
                        //创建页码li
                        li = '<li οnclick="javascript:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';
                    }
                    //拼接字符串
                    lis += li;
                }
                // for (var i = 1; i <= pb.totalPage; i++) {
                //     var li;
                //     if (pb.currentPage == i) {
                //         li = '<li class="curPage" οnclick="javascript:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';
                //     } else {
                //         //创建页码li
                //         li = '<li οnclick="javascript:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';
                //     }
                //     //拼接字符串
                //     lis += li;
                // }
                var nextPageNum = currentPage + 1;
                if (nextPageNum >= pb.totalPage) {
                    nextPageNum = pb.totalPage;
                }
                var nextPage = '<li  οnclick="javascript:load(' + cid + ',' + nextPageNum + ')" class="threeword"><a href="javascript:void(0)">下一页</a></li>';

                var lastPage = '<li class="threeword" οnclick="javascript:load(' + cid + ',' + pb.totalPage + ')"><a href="javascript:void(0);">末页</a></li>';
                lis += nextPage;
                lis += lastPage;
                //将lis内容内容添加到ul
                $("#pageNum").html(lis);

                //列表数据展示
                var route_lis = "";
                for (var i = 0; i < pb.list.length; i++) {
                    var route = pb.list[i];
                    var li = ' <li>\n' +
              '                        <div class="img"><img src="' + route.rimage + '" alt="" 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);
            })
        }

根据获取到的cid进行异步交互,获得数据进行处理.

• 拼接页码

  • 拼接首页和上一页与未页和下一页
  • 拼接页码,创建开始页码和结束页码,根据需要显示页码
    
    • 拼接列表数据内容,将data.list中的数据拼接li添加ul中即可.

• Servlet

@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 {
        //接收参数
        String currentPageStr = request.getParameter("currentPage");
        String pageSizeStr = request.getParameter("pageSize");
        String cidStr = request.getParameter("cid");
        //处理参数
        int cid = 0;
        if (cidStr != null && cidStr.length() > 0) {
            cid = Integer.parseInt(cidStr);
        }

        int pageSize = 5;
        if (pageSizeStr != null && pageSizeStr.length() > 0) {
            pageSize = Integer.parseInt(pageSizeStr);
        }

        int currentPage = 1;
        if (currentPageStr != null && currentPageStr.length() > 0) {
            currentPage = Integer.parseInt(currentPageStr);
        }
        //调用Service
        PageBean<Route> routePageBean = routeService.pageQuery(cid, currentPage, pageSize);
        writeValue(routePageBean, response);

    }

}

获取请求的参数,进行判空和添加默认值,再调用service方法

• Service

 public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize) {
        //创建PageBean
        PageBean<Route> pb = new PageBean<>();
        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) + 1 : totalCount / pageSize;
        pb.setTotalPage(totalPage);
        return pb;
    }

根据提交的数据,进行PageBean进行数据注入,

• Dao

@Override
    public Integer findTotalCount(int cid) {
        String sql = "select count(*) from tab_route where 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);
    }

进行简单的数据查询