thymeleaf实现分页

最新推荐文章于 2025-06-10 09:48:50 发布

` 淡欢清颜

最新推荐文章于 2025-06-10 09:48:50 发布

阅读量4.7k

点赞数 3

CC 4.0 BY-SA版权

文章标签： thymeleaf简单分页

本文链接：https://blog.youkuaiyun.com/r_12xq/article/details/88682957

博客介绍了Thymeleaf简单分页的实现步骤，包括在模板中添加JS引用、添加分页模板，使用jQuery向模板添加内容，以及后台处理请求返回数据，最后展示了分页结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@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";
	}

分页结果

在这里插入图片描述