页面分页

旅游页面分页

public class PageBean<T> {
    private int totalCount;
    private int totalPage;
    private int currentPage;
    private int pageSize;

    public int getTotalCount() {
        return totalCount;
    }

---

@WebServlet("/route/*")
public class RouteServlet extends BaseServlet {
    private RouteService routeService =new RouteServiceImpl();
    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 currentPage = 0;
        if (currentPageStr != null && currentPageStr.length() > 0) {
            currentPage = Integer.parseInt(currentPageStr);
        }else {
            //第一次访问可能为null，默认赋值1
            currentPage =1;
        }

        int pageSize = 0;
        if (pageSizeStr != null && pageSizeStr.length() > 0) {
            pageSize = Integer.parseInt(pageSizeStr);
        }else{
            //默认一页5条
            pageSize = 5;
        }

        //调用service查询RouteBean对象，将其序列化为json，返回
        PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize);
        writeJsonBack(pb,response);
    }


}

---

public class RouteServiceImpl implements RouteService {
    private RouteDao routeDao = new RouteDaoImpl();

    @Override
    public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize) {
        //封装pageBean，回写
        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;
    }
}

---

public class RouteDaoImpl implements RouteDao {
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    @Override
    public int findTotalCount(int cid) {
        String sql = "Select count(*) from tab_route where cid =?";
        return template.queryForObject(sql, Integer.class, cid);
        //Integer.class 返回Integer
    }

    @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>(Route.class), cid, start, pageSize);
    }
}

---

http://localhost/travel/route/pageQuery?cid=5

{"totalCount":513,"totalPage":103,"currentPage":1,"pageSize":5,"list":[{"rid":1,"rname":"【旅展 半价特惠 重走丝路•漫游宁夏 双飞4天】银川西部影视城 穆民新村 中卫沙坡头【品美酒 回族学唱花儿 感悟民俗】","price":999.0,"routeIntroduce":"走进【宁夏沙坡头】，感受西北大漠风情、体会“大漠孤烟直，长河落日圆”的塞上风光！","rflag":"1","rdate":"2018-02-09 01:13:16","isThemeTour":"0","count":0,"cid":5,"rimage":"img/product/small/m304b69a4c8328f7d6b8d5dadef020fe07.jpg","sid":1,"sourceId":"23677","category":null,"seller":null,"routeImgList":null},{"rid":2,"rname":"【官网专享 立减¥500 张家界天门山+大峡谷+凤凰古城+玻璃栈道+玻璃桥 高铁4天 无自费5钻】印象鲵宴-赶年宴+2晚蓝湾博格酒店","price":1799.0,"routeIntroduce":"官网专线，顶级品质！全程超豪华住宿，2晚入住超豪华铂金-蓝湾博格国际酒店，独家尊享金马VIP贵宾专用楼层。","rflag":"1","rdate":"2018-02-09 01:13:17","isThemeTour":"0","count":990,"cid":5,"rimage":"img/product/small/m34866f055de8630e94e25c40f277a79ba.jpg","sid":1,"sourceId":"22066","category":null,"seller":null,"routeImgList":null},{"rid":3,"rname":"【官网专享 5折预售 越南下龙湾+河内+芒街 高铁4天 高级团】双导游服务 免收服务小费【越超值·美食越南】","price":1199.0,"routeIntroduce":"双导游服务，免收服务小费，周全照顾贴心服务随心出游！品尝越南特色国宝美食，升级一餐越式炸鸡火锅宴！","rflag":"1","rdate":"2018-02-09 01:13:17","isThemeTour":"0","count":0,"cid":5,"rimage":"img/product/small/m3db4d2277b5df3d98597f79082ef92d6d.jpg","sid":1,"sourceId":"21998","category":null,"seller":null,"routeImgList":null},{"rid":4,"rname":"【官网专享 送箱 ¥1099秒杀 华东五市+乌镇+南浔 双飞6天 南京进上海出】升级1晚豪华酒店 漫步西湖【水墨江南】","price":1099.0,"routeIntroduce":"升级入住1晚豪华酒店；畅玩江南两大经典水乡——乌镇水乡和南浔水乡，体验这里的历史文化底蕴、清丽婉约的水乡古镇风貌。","rflag":"1","rdate":"2018-02-09 01:13:17","isThemeTour":"0","count":0,"cid":5,"rimage":"img/product/small/m3d91ef60e0c7fdeee97a4e2d3e5a42e84.jpg","sid":1,"sourceId":"21943","category":null,"seller":null,"routeImgList":null},{"rid":5,"rname":"梅州 双飞3天2晚 自由行套票【含广州直飞梅州早对晚含税往返机票+2晚梅州市区酒店】","price":999.0,"routeIntroduce":"含广州直飞梅州早对晚含税往返机票+2晚梅州市区酒店！","rflag":"1","rdate":"2018-02-09 01:13:17","isThemeTour":"0","count":0,"cid":5,"rimage":"img/product/small/m3ac1aa10b493b4b22221e19ba39f7e6a1.jpg","sid":1,"sourceId":"21917","category":null,"seller":null,"routeImgList":null}]}

route_list.html

    <script>
        $(function () {
            var search = location.search;
            var cid = search.split("=")[1];

            load(cid);
        });

        function load(cid, currentPage) {
            //发送ajax请求route/pageQuery，传递cid
            $.get("route/pageQuery", {cid: cid, currentPage: currentPage}, function (pb) {
                $("#totalPage").html(pb.totalPage);
                $("#totalCount").html(pb.totalCount);

                var lis = "";
                var firstPage = '
+ cid + ',' + i + ')">' +
                    '首页
';

                var per = pb.currentPage - 1;
                if(per <= 0 ){
                    per = 1;
                }
                var perPage = '
+ cid + ',' + per + ')" class="threeword">' +
                    '上一页
';

                var next = pb.currentPage +1;
                if (next >= pb.totalPage){
                    next = pb.totalPage;
                }
                var nextPage = '
+ cid + ',' + next + ')">' +
                    '下一页
';

                var lastPage = '
+ cid + ',' + pb.totalPage + ')">' +
                    '尾页
';

                lis += firstPage;
                lis += perPage;
                for (var i = 1; i <= pb.totalPage; i++) {
                    var li;

                    if (pb.currentPage == i) {
                        li = '
+ cid + ',' + i + ')">' +
                            '' + i + '
';
                    } else {
                        li = '
+ cid + ',' + i + ')">' +
                            '' + i + '
';
                    }
                    lis += li;

                    //在这里直接修改href，是同步提交，直接跳转页面。
                    //不让页面跳转，只能ajax
                    li = '
+ cid + ',' + i + ')">' +
                        '' + i + '
';

                }
                lis += nextPage;
                lis += lastPage;
                $("#pageNums").html(lis);


                var routeLis = "";
                for (var i = 0; i < pb.list.length; i++) {
                    //json对象
                    var route = pb.list[i];
                    var li = ' 
\n' +
                        '
+ route.rimage + '" style="width: 299px">
\n' +
                        '
\n' +
                        '
' + route.rname + '
\n' +
                        '
\n' +
                        '
' + route.routeIntroduce + '
\n' +
                        '
\n' +
                        '
\n' +
                        '
\n' +
                        '¥\n' +
                        '' + route.price + '\n' +
                        '起\n' +
                        '
\n' +
                        '
查看详情
\n' +
                        '
\n' +
                        '
';
                    routeLis += li;

                }
                $("#route").html(routeLis);

            });


        }
    </script>

页码显示优化

第一页1~10，第四页前3后6，到第七页就是前5后4

到最后一页，不足10个。

 var begin;
                var end;
                if (pb.totalPage < 10) {
                    begin = 1;
                    end = pb.totalPage;
                } else {
                    begin = pb.currentPage - 5;
                    end = pb.currentPage + 4;
                    if (begin < 1) {
                        begin = 1;
                        end = begin + 9;
                    }
                    if (end > pb.totalPage) {
                        end = pb.totalPage;
                        begin = end - 9;
                    }
                }
                for (let i = begin; i <= end; i++) {
                    var li;

                    if (pb.currentPage == i) {
                        li = '
+ cid + ',' + i + ')">' +
                            '' + i + '
';
                    } else {
                        li = '
+ cid + ',' + i + ')">' +
                            '' + i + '
';
                    }
                    lis += li;

                    //在这里直接修改href，是同步提交，直接跳转页面。
                    //不让页面跳转，只能ajax
                    li = '
+ cid + ',' + i + ')">' +
                        '' + i + '
';
                }


                lis += nextPage;
                lis += lastPage;
                $("#pageNums").html(lis);

关于为什么数据会“不断自己加载”，是因为每次点击页面按钮，都是在重新加载一个页面，入口函数自己会去请求。而且是ajax，页面不会看出来刷新。

$("#route").html(routeLis);
                window.scrollTo(0, 0);
            });
        }
    </script>  页面切换自己重新加载，会回滚到页面顶端