利用Jquery-tmpl模板实现分页

分页用的的UI是amazeUI，读者可忽略，这里就提一下。

• 大体思路如下：
  • 在返回页面之前的那个请求中（此处为/applicant/home）获取一共可以分几页，形成如下图：

Paste_Image.png

• 对每个页按钮都注册一个ajax请求，返回的数据用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模板，特别注意一下转义字符的构建
<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:这个是restful风格请求，接受一波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;
    }