原生Js代码实现数据分页展示功能

虽然有很多分页的插件可以直接使用例如pagehelper等，但是在学习的过程中还是手敲的一遍原生的代码实现功能。

实现应该定义一个pageBean对象，代表的分页对象，里面有以下几个属性

 private int totalCount; // 总记录数
    private int totalPage; // 总页数
    private int currentPage; // 当前页码
    private int pageSize; // 没页显示的条数
    private List<T> list; // 每页显示的数据结合

 $(function () {
            //alert(location.search)
            var id = location.search.split("=")[1]

            load(id);


        })

页面加载完成后发送Ajax，发送当前页面currentPage  请求pageBean对象，第一次请求默认设置currentPage为1

function load(id,currentPage) {
            $.get("RouteServlet/pageQuery",{cid:id,currentPage:currentPage},function (pb) {
   
   

Servlet代码

 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 {
            currentPage = 1;
        }

        int pageSize = 0;
        if (pageSizestr!= null && pageSizestr.length() > 0) {
            pageSize = Integer.parseInt(pageSizestr);
        }
        else {
            pageSize = 5;
        }
        PageBean<Route> queryall = routeService.queryall(cid, currentPage, pageSize);
        // 序列化返回
        ObjectMapper objectMapper = new ObjectMapper();
        response.setContentType("application/json;charset=utf-8");
        objectMapper.writeValue(response.getOutputStream(),queryall);
    }

扫描二维码关注公众号，回复： 13372391 查看本文章

前端获取到参数后，解析数据，展示在页面上

 function load(id,currentPage) {
            $.get("RouteServlet/pageQuery",{cid:id,currentPage:currentPage},function (pb) {
                // 解析数据

                // 1.分页数据条展示
                $("#totalCount").html(pb.totalCount);
                $("#totalPage").html(pb.totalPage);

                var lis = ""
                var firstPage = '<li onclick="javascript:load('+id+')"><a href="javascript:void(0)">首页</a></li>'
                // 计算上一页
                var before = pb.currentPage -1;
                if (before <=0) {
                    before = 1;
                }
                var beforePage = '<li onclick="javascript:load('+id+','+before+')" class="threeword"><a href="#">上一页</a></li>'
                lis += firstPage;
                lis += beforePage;

                // 定义开始位置，结束位置  一共显示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 (var i = begin; i<=end;i++){
                    if (currentPage==i){
                        var li = '<li class="curPage" onclick="load('+id+','+i+')"><a>'+i+'</a></li>'
                    }
                    else {
                        var li = '<li onclick="load('+id+','+i+')"><a>'+i+'</a></li>'
                    }
                    lis += li;
                }
                var next = pb.currentPage +1;
                if (next >= pb.totalPage) {
                    next = pb.totalPage;
                }
                var lastPage = '<li onclick="javascript:load('+id+','+pb.totalPage+')" class="threeword"><a href="javascript:;">末页</a></li>'
                var nextPage = '<li onclick="javascript:load('+id+','+next+')"  class="threeword"><a href="javascript:;">下一页</a></li>'
                lis += nextPage;
                lis += lastPage;
                $("#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+'" 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").html(route_lis);

            })
        }

页面效果