thymleaf 动态分页模板

最新推荐文章于 2024-03-25 09:32:59 发布

萌萌草的屋

最新推荐文章于 2024-03-25 09:32:59 发布

阅读量468

点赞数

分类专栏： springboot themleaf layui

本文链接：https://blog.youkuaiyun.com/meng70345meng/article/details/90635769

版权

springboot 同时被 3 个专栏收录

3 篇文章

订阅专栏

layui

3 篇文章

订阅专栏

themleaf

2 篇文章

订阅专栏

博客介绍了分页功能的实现。前端使用Thymleaf的分页模板和Layui的分页样式，后端采用JPA进行分页查询，并将结果放入ModalMap返回。此外，还使用了自定义的Page类，继承自PageRequest，封装了当前访问链接。

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

thymleaf 使用的分页模板，前端样式使用的layui的分页样式。

后端查询使用的是 jpa分页，

PageRequest pageRequest = PageRequest.of(pageNumber, size, Direction.DESC,"update_time");

Page<VopProduct> vopProductList = vopProductRepository.list(pageRequest);

然后放到modalmap中，进行返回

其中page类为自定义类，继承了pageRequest，对象中封装了当前访问链接。

<div id="demo7">
								<div class="layui-box layui-laypage layui-laypage-default"
									id="layui-laypage-1"  th:fragment="cboss_page" >
									<span class="page_path disapper" th:text="${page.path}" ></span>
									<span class="layui-laypage-count" >共<em th:text="${userList.getTotalElements()}"></em> 条</span>
									<a href="javascript:;" th:class="${page.hasPrevious()}?'layui-laypage-prev':'layui-laypage-prev layui-disabled'" th:href="@{ ${page.hasPrevious()}? '/user/query/'+${page.pageNumber-1}+'/'+${page.pageSize} : '#'}" >上一页</a>
									
									
									<!--  <span class="layui-laypage-curr">
									  <em class="layui-laypage-em"></em>
									  <em>1</em></span>  -->
									  <!-- <a  th:href="${#httpServletRequest.getContextPath()}"  ></a> -->
									 <a th:text="${page.pageNumber-2 < 0 ? '' : page.pageNumber-1}" th:href="@{${page.path}+${page.pageNumber-2}+'/'+${page.pageSize}}" th:class="${page.pageNumber-2 <0 ? 'disapper' :''}"></a>
									   <a   th:text="${page.pageNumber-1 <0 ? '' : page.pageNumber}" th:href="@{${page.path}+${page.pageNumber-1}+'/'+${page.pageSize}}"  th:class="${page.pageNumber-1 <0 ? 'disapper' :''}" ></a>
									  <a th:class="layui-laypage-curr" th:href="@{${page.path}+${page.pageNumber}+'/'+${page.pageSize}}" ><em class=" layui-laypage-em" ></em> <em th:text="${page.pageNumber + 1}"></em></a>
									   <a th:text="${page.pageNumber+2 <=userList.getTotalPages() ? page.pageNumber+2 : ''}" th:href="@{${page.path}+${page.pageNumber+1}+'/'+${page.pageSize}}" th:class="${page.pageNumber+2 <=userList.getTotalPages() ? '' :'disapper'}"></a>
									   <a   th:text="${page.pageNumber+3 <= userList.getTotalPages() ? page.pageNumber+3 : ''}" th:href="@{${page.path}+${page.pageNumber+2}+'/'+${page.pageSize}}" th:class="${page.pageNumber+3 <=userList.getTotalPages() ? '' :'disapper'}" ></a>
									
									<a th:href="@{${page.pageNumber+1 < userList.getTotalPages()} ? ${page.path}+${page.pageNumber+1}+'/'+${page.pageSize} : '#' }" th:class="${page.pageNumber+1 < userList.getTotalPages()? 'layui-laypage-next' : 'layui-laypage-next layui-disabled' }">下一页</a>
									<span class="layui-laypage-limits">
									  <select lay-ignore="" th:name="pageSize" th:class="pageSize" th:value="${page.pageSize}" onchange="goPage()"  >
									    <option th:value="1" th:selected = "${page.pageSize == 1}" >1 条/页</option>
									    <option  th:value="2" th:selected = "${page.pageSize == 2}" >2 条/页</option>
									    <option  th:value="3" th:selected = "${page.pageSize == 3}" >3条/页</option>
									    <option th:value="4" th:selected = "${page.pageSize == 4}" >4条/页</option>
									    <option  th:value="5" th:selected = "${page.pageSize == 5}" >5条/页</option></select>
									</span>
									
									<span class="layui-laypage-count" >共<em th:class="my_total_page" th:text="${userList.getTotalPages()}"></em> 页</span>
								
									<span class="layui-laypage-skip">到第
									  <input type="text" th:id="goPage" th:name="page.pageNumber" class="layui-input">页
									  <button type="button" class="layui-laypage-btn" onclick="goPage()">确定</button></span>
								</div>
							
							</div>