前端分页操作

通过ajax调用接口获取数据

<script src="${path}/static/cysxx/js/jquery.min.js"></script>
<script>

    var categoryId = ${categoryId};
    //    初始化内容
    $(document).ready(function () {
        console.log('aaaaaaaaaaaaaaaaaaa');
        console.info("categoryId=" + categoryId);

        $.ajax({
            url: "${ctxf}/api/article/getArticleListByPage",
            type: 'post',
            dataType: 'json',
            data: {
                pageNo: "1",
                pageSize: "6",
                categoryId: categoryId
            },
            timeout: 1000,
            success: function (data) {
                $("#pageNum").val(data["totalPages"]);
                console.info($("#pageNum").val());
                console.log(data);
                var lists = data["list"];
                var listr = '';
                var lastPageNo = 6;
                if (data["currentPage"] == data["totalPages"]) {
//                    console.info("the last page");
                    lastPageNo = data["totalRecords"] - (data["totalPages"] - 1) * 6;
//                    console.info("lastPageNo = "+lastPageNo);
                }
                for (var j = 0; j < lastPageNo; j++) {
//                                        console.info("11"+lists[j].image);
                    var imageurl = '/static/cysxx/images/11.png';
                    console.info("imageurl----" + imageurl);

                    if (lists[j].image != "" && lists[j].image != null) {
                        console.info("lists[j].image----" + lists[j].image);

                        imageurl = lists[j].image;
                    }

                    console.info("id----" + lists[j].id);
                    console.info("imageurl----" + imageurl);
                    listr += '<li onclick="window.location.href=\'' + '${ctxf}\/cms\/articleDataShow\/detail\?id=' + lists[j].id + '&categoryId=' + categoryId + '&totalRecords=' + data["totalRecords"] + '\'"><div><img src="' + imageurl + '"></div>' +
                            '<span class="cys-ss-title">' + lists[j].title + '</span>' +
                            '<span class="cys-ss-info">摘要：' + lists[j].description + '</span></li>'
                }
                $('#showlist').html(listr);


            },
            fail: function (err, status) {
                console.log(err)
            }
        });


    });

    //    有几页
    var endpage = $("#pageNum").val();
    function begin() {
        console.log('bbbbbbbbbbbbb');
        var value = $('#readtext').val();
        console.log(value);
        $('#readtext').val(1);
        showInfo();
    }
    function pre() {
        var value = $('#readtext').val();
        console.log(value);
        var Intvalue = parseInt(value);
        if (Intvalue > 1) {
            var prevalue = Intvalue - 1;
            $('#readtext').val(prevalue);
        }

        showInfo();
    }
    function after() {
        var value = $('#readtext').val();
        console.log(value);
        var Intvalue = parseInt(value);
        if (Intvalue < $("#pageNum").val()) {
            var aftvalue = Intvalue + 1;
            $('#readtext').val(aftvalue);
        }
        showInfo()
    }
    function final() {
        var value = $('#readtext').val();
        console.log(value);
        $('#readtext').val($("#pageNum").val());
        showInfo();
    }
    //    变化内容
    function showInfo() {
        var value = $('#readtext').val();
        console.log('我是数据哦' + value);
        $.ajax({
            url: "${ctxf}/api/article/getArticleListByPage",
            type: 'post',
            dataType: 'json',
            data: {
                pageNo: value,
                pageSize: "6",
                categoryId: categoryId
            },
            timeout: 1000,
            success: function (data) {
                console.log(data);
                var lists = data["list"];
                var listr = '';
                var lastPageNo = 6;
                if (data["currentPage"] == data["totalPages"]) {
//                    console.info("the last page");
                    lastPageNo = data["totalRecords"] - (data["totalPages"] - 1) * 6;
//                    console.info("lastPageNo = "+lastPageNo);
                }
                for (var j = 0; j < lastPageNo; j++) {
                    var imageurl = '/static/cysxx/images/11.png';
                    console.info("imageurl----" + imageurl);

                    if (lists[j].image != "" && lists[j].image != null) {
                        imageurl = lists[j].image;
                    }
                    console.info("imageurl----" + imageurl);

                    listr += '<li><div><img src="' + imageurl + '"></div>' +
                            '<span class="cys-ss-title">' + lists[j].title + '</span>' +
                            '<span class="cys-ss-info">摘要：' + lists[j].description + '</span></li>'
                }
                $('#showlist').html(listr);
            },
            fail: function (err, status) {
                console.log(err)
            }
        });

    }

</script>

 页面代码

      
            <div class="cys-s-content">
                <ul id="showlist">

                </ul>
            </div>
            <div class="cys-s-select">
                <ul>
                    <li>
                        <a href="#"><img src="${path}/static/cysxx/images/button-1.png" onclick="begin()">
                        </a></li>
                    <li>
                        <img src="${path}/static/cysxx/images/button-2.png" onclick="pre()">
                    </li>
                    <li class="cys-ss-input">
                        <input type="text" readonly="readonly" value="1" id="readtext">
                    </li>
                    <li>
                        <img src="${path}/static/cysxx/images/button-4.png" onclick="after()">
                    </li>
                    <li>
                        <img src="${path}/static/cysxx/images/button-5.png" onclick="final()">
                    </li>
                </ul>
            </div>

 接口代码

    @RequestMapping(value = "getArticleListByPage")
    @ResponseBody
    public Map<String, Object> getArticleListByPage(String categoryId, Article article, HttpServletRequest request, HttpServletResponse response) {
        Map<String, Object> map = ApiResultUtils.getBaseMapSuccess();
        Page<Article> page = new Page<Article>(request, response);
        System.out.println("categoryId:" + categoryId);
        Category C = new Category();
        C.setId(categoryId);
        article.setCategory(C);
        System.out.println("pageNo" + request.getParameter("pageNo"));
        System.out.println("pageSize" + request.getParameter("pageSize"));
        //设置当前页
        if (request.getParameter("pageNo") != null) {
            page.setPageNo(Integer.parseInt(request.getParameter("pageNo")));
        }
        //默认分页大小为5
        if (request.getParameter("pageSize") != null) {
            page.setPageSize(Integer.parseInt(request.getParameter("pageSize")));
        } else {
            page.setPageSize(5);
        }
        //设置排列顺序
        if (request.getParameter("orderBy") != null) {
            page.setOrderBy(request.getParameter("orderBy"));
        }
        //分页查询
        page = articleService.findPage(page, article);
        List<Article> list = page.getList();
        map.put("list", list);
        map.put("currentPage", page.getPageNo());
        map.put("pageSize", page.getPageSize());
        map.put("totalRecords", page.getCount());
        map.put("totalPages", page.getTotalPage());
        map.put("categoryId", categoryId);
        return map;
    }