springboot+thymeleaf处理带搜索条件的分页问题解决思路
⼀开始写项⽬的时候，没⽤ajax，导致做搜索分页功能的时候废了好⼤的劲，在这⾥分享⼀下处理这个问题的思路。
框架⽤的springboot，通过thymeleaf模板和前端交互，没有使⽤ajax，所以数据都是在域对象放的。分页⽤的springdatajpa的分页，他个其他的分页⼯具⼤同⼩异，优点在于不
⽤在引⼊新的依赖，直接通过查询得到的就是Page对象，缺点就是springdatajpa⾃带的分页⼯具其起始页是从0开始的，这⼀点⽐较恶⼼，哈哈。
主要思路就是把搜索条件和分页的请求地址都在域中定义，然后再js⽅法中得到这些信息，发送请求的时候调⽤js⽅法，拼接带搜索条件的参数。
--page分页-- 代码写的啰嗦，抽时间优化⼀下
<div class="box-footer" th:fragment="page" xmlns:th="">
<div class="modal-footer no-margin-top">
<div class="pull-left">
<div class="form-group form-inline">
总共<span th:text="${alPages}"></span> 页，共<span th:text="${alElements}"></span> 条数据。
</div>
</div>
<div class="page">
<ul class="pagination" th:if="${alPages le 8 && alPages gt 1}">
<!-- 上⼀页 -->
<li class="page-item" th:if="${PageNumber() != 0}">
<a th:onclick="pageRequest([[${PageNumber()-1}]])"class="page-link" data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!-- 迭代⽣成页码 -->
<li th:if="${alPages gt 1}"class="page-item" data-th-each="i : ${#numbers.sequence(1, alPages)}"
data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
<a class="page-link" th:onclick="pageRequest([[${i}-1]])">
<span data-th-text="${i}"></span>
</a>
</li>
<!-- 下⼀页 -->
<li class="page-item" th:if="${page.pageable.pageNumber} != ${alPages}-1">
<a class="page-link" th:onclick="pageRequest([[${page.pageable.pageNumber}+1]])">
»
</a>
</li>
</ul>
<!-- 处理页数⼤于7 的情况 -->
<ul class="pagination" data-th-if="${alPages gt 7}" >
<!-- 上⼀页 -->
<li class="page-item" data-th-if="${PageNumber() != 0}">
<a th:onclick="pageRequest([[${PageNumber()-1}]])"class="page-link" data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!-- ⾸页 -->
<li class="page-item" data-th-classappend="${(page.number + 1) eq 1} ? 'active' : ''" >
<a th:onclick="pageRequest(0)"class="page-link" data-th-attr="pageIndex=0">1</a>
</li>
<!-- 当前页⾯⼩于等于4 -->
<li class="page-item" data-th-if="${(page.number + 1) le 4}" data-th-each="i : ${#numbers.sequence(2,5)}"spring boot选择题
data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
<a class="page-link" th:onclick="pageRequest([[${i-1}]]) " data-th-attr="pageIndex=${i} - 1">
<span data-th-text="${i}"></span>
</a>
</li>
<li class="page-item disabled" data-th-if="${(page.number + 1) le 4}">
<a class="page-link">
<span aria-hidden="true">...</span>
</a>
</li>
<!-- 最后⼀页与当前页⾯之差，⼩于等于3 -->
<li class="page-item disabled" data-th-if="${(alPages-(page.number + 1)) le 3}">
<a class="page-link">
<span aria-hidden="true">...</span>
</a>
</li>
<li class="page-item" data-th-if="${(alPages-(page.number + 1)) le 3}" data-th-each="i : ${#numbers.alPages-4, alPages-1)}"
data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
<a class="page-link" th:onclick="pageRequest([[${i-1}]])" data-th-attr="pageIndex=${i} - 1">
<span data-th-text="${i}"></span>
</a>
</li>
<!-- 最后⼀页与当前页⾯之差⼤于3，且当前页⾯⼤于4-->
<li class="page-item disabled" data-th-if="${((page.number + 1) gt 4) && ((alPages-(page.num
ber + 1)) gt 3 )}">
<a class="page-link">
<span aria-hidden="true">...</span>
</a>
</li>
<li class="page-item" data-th-if="${((page.number + 1) gt 4) && ((alPages-(page.number + 1)) gt 3 )}" data-th-each="i : ${#numbers.sequence(page.number, page.number+3)}" data-th-classappend="${(page.number + 1) eq i} ? 'a <a th:onclick="pageRequest([[${i-1}]])"class="page-link" data-th-attr="pageIndex=${i} - 1"><span data-th-text="${i}"></span></a>
</li>
<li class="page-item disabled" data-th-if="${((page.number + 1) gt 4) && ((alPages-(page.number + 1)) gt 3 )}">
<a class="page-link">
<span aria-hidden="true">...</span>
</a>
</li>
<!-- 最后⼀页 -->
<!-- <li class="page-item" data-th-classappend="${(page.number + 1) alPages} ? 'active' : ''" >-->
<!-- <a th:onclick="pageRequest([[${TotalPages() - 1}]])"class="page-link" data-th-attr="pageIndex=${alPages} - 1">[[${alPages}]]</a>-->
<!-- </li>-->
<li class="page-item" data-th-classappend="${(page.number + 1) alPages} ? 'active' : ''">
<a th:onclick="pageRequest([[${TotalPages() - 1}]])"class="page-link" >[[${alPages}]]</a>
</li>
<!-- 下⼀页 -->
<li class="page-item" th:if="${page.pageable.pageNumber} != ${alPages}-1">
<a class="page-link" th:onclick="pageRequest([[${page.pageable.pageNumber}+1]])">
»
</a>
</li>
</ul>
</div>
</div>
</div>
代码中，请求的地⽅调⽤了js⽅法，因为请求是不固定的，所以js中具体定义请求的路劲。
function pageRequest(param) {var url = '[[${url}]]';//这个写法可以把域中的地址拿到请求是后端转发到前端（不是重定向）
url = place('&','&');//这个是个bug，后端放到域中的&到前端之后被转义成&；了，所以我在这⾥在替换⼀下
var search = '[[${search}]]' //获取域中的搜索条件
var url1 = url+param+'&search='+serach;
//alert(url);
location.assign(url1)
}
controller层代码
@RequestMapping("/list")
public String all(String search,Model model, @RequestParam(defaultValue = "0")Integer pageNum,@RequestParam(defaultValue = "1") Integer requestStatus){ model.addAttribute("url","/workOrder/list?requestStatus="+requestStatus+"&pageNum=");
Page<WorkOrder> page = null;
switch (requestStatus){
case1://全部
page = workOrderService.search(workOrder,pageNum,10);
model.addAttribute("class","1");//⽤于按钮状态回显我再前端有判断
break;
case2://本⼈发起
page = workOrderService.findPageMyWorkOrder(pageNum, 10);
model.addAttribute("class","2");
break;
case3://处理中
page = workOrderService.findPageUnSuccessWorkOrder(pageNum, 10);
model.addAttribute("class","3");
break;
case4://已完成
page = workOrderService.findPageSuccessWorkOrder(pageNum, 10);
model.addAttribute("class","4");
break;
default:
break;
}
model.addAttribute(search);
model.addAttribute("page",page);//包含分页的信息和查询到的信息
return"workOrder-list";
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论