分頁用的的UI是amazeUI，讀者可忽略，這里就提一下。

• 大體思路如下：
  • 在返回頁面之前的那個(gè)請求中（此處為/applicant/home）獲取一共可以分幾頁，形成如下圖：

Paste_Image.png

• 對每個(gè)頁按鈕都注冊一個(gè)ajax請求，返回的數(shù)據(jù)用tmpl模板在jquery里組合Html，插入到Html中
• 具體代碼（注意框架要先引用）：

//one 
@GetMapping(value = "/applicant/home")
    public String applicantHome(Model model){
        int size = ((noticeService.retriveAllNotice().size()) / Const.NOTICE_PAGE_SIZE) ;
        int rem = ((noticeService.retriveAllNotice().size()) % Const.NOTICE_PAGE_SIZE);
        size = (rem == 0 ? size : size + 1);
        model.addAttribute("pageSize", size);
        model.addAttribute("username", CommonUtil.getFromSession(request, "username"));
//        model.addAttribute("noticeList", noticeService.retriveAllNotice());
        return "applicant/home";
    }

// two : 生成上圖所示頁面，這里用到了thymeleaf模板，特別注意一下轉(zhuǎn)義字符的構(gòu)建
<ul class="am-pagination am-pagination-centered" id ="notice-page-ul">
        <li id="prev-page"><a href="#">?</a></li>
        <li class="notice-page" th:id="'notice-page' + ${pageNumber}" th:each="pageNumber : ${#numbers.sequence(1,pageSize)}" ><a th:onclick="'pageAjax(\'/notice/notice_list/'+${pageNumber}+'\', '+${pageNumber}+');'" th:text="${pageNumber}"></a></li>
        <li id="next-page"><a href="#">?</a></li>
    </ul>

// three : 模板的用法見：http://www.cnblogs.com/wumadi/p/3443471.html
<script type="text/html" id="notice-template">
        <li class="am-g am-list-item-dated" >
            <a th:href="/notice/content/${id}" class="am-list-item-hd ">${content}</a>
            <span class="am-list-date" >${createTime}</span>
        </li>
</script>
    <script  th:inline="javascript">
        var pageSize = [[${pageSize}]];
        pageAjax("/notice/notice_list/1", 1);
        $("#prev-page").click(function () {
            pageNumber = $("#notice-page-ul .am-active").text();
            if(pageNumber > 1){
                pageAjax("/notice/notice_list/" + pageNumber, --pageNumber);
            }
        });
        $("#next-page").click(function () {
            pageNumber = $("#notice-page-ul .am-active").text();
            if(pageNumber < 4){
                pageAjax("/notice/notice_list/" + pageNumber, ++pageNumber);
            }
        });
        function pageAjax(url, pageNumber) {
            $("#notice-list").empty();
            $("#notice-page-ul .notice-page").removeAttr("class");
            $("#notice-page"+pageNumber).attr("class", "notice-page am-active");
            if(pageNumber == pageSize){
                $("#next-page").attr("class", "am-disabled");
            }else if(pageNumber == 1){
                $("#prev-page").attr("class", "am-disabled");
            }else{
                $("#prev-page").removeAttr("class");
                $("#next-page").removeAttr("class");
            }
            $.ajax({
                type: "post",
                url: url,
                dataType: "json",
                async: false,
                success: function (data) {
                    if(data.rspCode == "000000"){
                        noticeList = data.data;
                        $.each(noticeList ,function (key, value) {
                        //這里利用了模板
                            $('#notice-template').tmpl(value).appendTo("#notice-list");
                        })
                    }
                }
            })
        }
    </script>

//four:這個(gè)是restful風(fēng)格請求，接受一波ajax請求，pageNumber即第幾頁
  @PostMapping("/notice_list/{pageNumber}")
    public ResponseData getNotices(@PathVariable Integer pageNumber){
        List<Notice> noticeList = noticeService.retriveAllNotice();
        int size = noticeList.size();
        if(null != noticeList){
            int from = (pageNumber - 1) * Const.NOTICE_PAGE_SIZE;
            int to = pageNumber * Const.NOTICE_PAGE_SIZE;
            if(size < to){
                to = size;
            }
            return new ResponseData(ExceptionMsg.SUCCESS, noticeList.subList(from, to));
        }
        return null;
    }