thymeleaf实现分页

@qxr

第一步：首先在模板中添加JS引用

<script src="/js/jquery.min.js" ></script>
<script src="/js/jquery.page.js" ></script>

第二步：在模板中添加分页模板

<div class="pageTemplate"></div>

第三步：使用jQuery向模板中添加内容

<script  type="text/javascript"  th:inline="javascript">
/*<![CDATA[*/
   $(".pageTemplate").createPage({
       pageCount: [[${pageCount}]],
	        current: [[${pageNo}]],
	        backFn: function(pageNo) {
	        	searchQuery(pageNo);
	        }
    });
    //查询方法
    function searchQuery(pageNo) {
        window.location.href="/?pageNo="+pageNo;
    }
/*]]>*/
</script>

第四步：后台处理请求返回数据

@RequestMapping(value = "xx.html")
	public String history(ModelMap modelMap, Integer pageSize, Integer pageNo,String queryContent) {
		pageNo = pageNo == null ? 0 : pageNo;
		pageSize = pageSize == null ? 20 : pageSize;
		Map<String, String> queryMap = null;
		if(queryContent != null) {
			queryMap = new HashMap<String, String>();
			queryMap.put("queryContent", queryContent);
		}
		Page<XX> xxPage = XXService.getList(pageSize, pageNo,queryMap);
		modelMap.addAttribute("historyTranscodeList", xxPage.getContent());
		if(xx.getNumber()==0) {
			modelMap.addAttribute("pageNo", 1);
		}else {
			modelMap.addAttribute("pageNo", xxPage.getNumber());
		}		
		modelMap.addAttribute("pageCount", xxPage.getTotalPages());
		return "xx.html";
	}

分页结果