利用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模板，特别注意一下转义字符的构建

        
«
        

        
»
    

// three : 模板的用法见：http://www.cnblogs.com/wumadi/p/3443471.html

    

//four:这个是restful风格请求，接受一波ajax请求，pageNumber即第几页
  @PostMapping("/notice_list/{pageNumber}")
    public ResponseData getNotices(@PathVariable Integer pageNumber){
        List 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;
    }