版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_31653405/article/details/87178551
效果图:
代码:
后台:
application.xml
###翻页配置[默认页数,默认条数]
spring.page.maxPage=0
spring.page.maxSize=10
OrderServiceImpl.java
/***
* 分页
*/
@Override
public Page<Order> findAllOrder(Integer page, Integer size) {
@SuppressWarnings("deprecation")
Pageable pageable = new PageRequest(page, size, Sort.Direction.ASC, "orderId");
return orderRepository.findAll(pageable);
}
Controller.java
@Value("${spring.page.maxPage}")
public Integer maxPage;
@Value("${spring.page.maxSize}")
public Integer maxSize;
/** 无搜索条件**/
@RequestMapping(value = "loginOrder",method = RequestMethod.GET)
public String loginOrder(@PathVariable String type,HttpSession session,ModelMap modelMap,
@RequestParam(defaultValue="") Integer page,
@RequestParam(defaultValue="") Integer size
){
Page<Order> listPages = orderService.findAllOrder(PagesConfig.getPage(maxPage,page),PagesConfig.getSize(maxSize,size));
modelMap.addAttribute("listPages",listPages);
return "adminManagement/orderManagement/ordermanage";
}
/**带搜索条件**/
@Override
public Page<User> findAllUserByState(Integer page, Integer size, int state) {
Pageable pageable = new PageRequest(page, size, Sort.Direction.ASC, "id");
Page<User> user = usersRepository.findAll(new Specification<User>() {
@Override
public Predicate toPredicate(Root<User> root, CriteriaQuery<?> query, CriteriaBuilder criteriaBuilder) {
List<Predicate> list = new ArrayList<Predicate>();
list.add(criteriaBuilder.equal(root.get("state").as(String.class), state));
Predicate[] p = new Predicate[list.size()];
return criteriaBuilder.and(list.toArray(p));
}
},pageable);
return user;
}
前台:
单独创建一个翻页的html文件,在需要的页面进行引用即可
page.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="page">
<body>
<div th:fragment="pager" style=""class="">
<div class="text-right"
th:with="baseUrl=${#httpServletRequest.getRequestURL().toString()},pars=${#httpServletRequest.getQueryString() eq null ? '' : new String(#httpServletRequest.getQueryString().getBytes('iso8859-1'), 'UTF-8')}">
<ul style="margin:0px;" class="pagination ui-pagination-container"
th:with="newPar=${new String(pars eq null ? '' : pars).replace('page='+(listPages.number), '')},curTmpUrl=${baseUrl+'?'+newPar},curUrl=${curTmpUrl.endsWith('&') ? curTmpUrl.substring(0, curTmpUrl.length()-1):curTmpUrl}" >
<li style="float:left;" class="ui-pagination-page-item">
<a href="/#" th:href="@{${curUrl}(page=0)}"><< </a>
</li>
<li th:if="${listPages.hasPrevious()}" style="float:left;" class="ui-pagination-page-item">
<a href="/#" th:href="@{${curUrl}(page=${listPages.number-1})}">< </a>
</li>
<!--总页数小于等于10-->
<div th:if="${(listPages.totalPages le 10) and (listPages.totalPages gt 0)}" th:remove="tag">
<div th:each="pg : ${#numbers.sequence(0, listPages.totalPages - 1)}" th:remove="tag">
<span th:if="${pg eq listPages.getNumber()}" th:remove="tag">
<li class="ui-pagination-page-item:active" style="float:left;">
<span class="ui-pagination-page-item1" th:text="${pg+1}">${pageNumber} </span>
</li>
</span>
<span th:unless="${pg eq listPages.getNumber()}" th:remove="tag">
<li style="float:left;" class="ui-pagination-page-item">
<a href="/#" th:href="@{${curUrl}(page=${pg})}" th:text="${pg+1}"> </a>
</li>
</span>
</div>
</div>
<!-- 总页数大于10时 -->
<div th:if="${listPages.totalPages gt 10}" th:remove="tag">
<li style="float:left;" th:if="${listPages.number-2 ge 0}" class="ui-pagination-page-item">
<a href="/#" th:href="@{${curUrl}(page=${listPages.number}-2)}" th:text="${listPages.number-1}"> </a>
</li>
<li style="float:left;" th:if="${listPages.number-1 ge 0}" class="ui-pagination-page-item">
<a href="/#" th:href="@{${curUrl}(page=${listPages.number}-1)}" th:text="${listPages.number}"> </a>
</li>
<li style="float:left;" class="active ui-pagination-page-item:active">
<span class="current_page ui-pagination-page-item1" th:text="${listPages.number+1}"> </span>
</li>
<li style="float:left;" th:if="${listPages.number+1 lt listPages.totalPages}" class="ui-pagination-page-item">
<a href="/#" th:href="@{${curUrl}(page=${listPages.number}+1)}" th:text="${listPages.number+2}"> </a>
</li>
<li style="float:left;" th:if="${listPages.number+2 lt listPages.totalPages}" class="ui-pagination-page-item">
<a href="/#" th:href="@{${curUrl}(page=${listPages.number}+2)}" th:text="${listPages.number+3}"> </a>
</li>
</div>
<li style="float:left;" th:if="${listPages.hasNext()}" class="ui-pagination-page-item">
<a href="/#" th:href="@{${curUrl}(page=${listPages.number+1})}">> </a>
</li>
<li style="float:left;" class="ui-pagination-page-item">
<a href="/#" th:href="${listPages.totalPages le 0 ? curUrl+'page=0':curUrl+'&page='+(listPages.totalPages-1)}">>> </a>
</li>
<li style="float:left;" class="ui-pagination-page-item2">
<span th:utext="'共'+${listPages.totalPages}+'页 / '+${listPages.totalElements}+' 条'"></span>
</li>
</ul>
</div>
</div>
</body>
</html>
显示页面
<!-- 分页插件 -->
<link rel="stylesheet" href="/css/jquery.pagination.css">
<script type="text/javascript" src="/js/query.pagination.js"></script>
<!-- 调节表格宽度 -->
<script type="text/javascript" src="/js/colResizable-1.5.min.js"></script>
<script type="text/javascript">
$(function(){
var onSampleResized = function(e){
var columns = $(e.currentTarget).find("th");
};
$("#sortable").colResizable({
liveDrag:true,
// gripInnerHtml:"<div class='grip'></div>",
// draggingClass:"dragging",
onResize:onSampleResized
});
});
</script>
<div style="float:right;">
<div th:include="/adminManagement/pages/page :: pager" th:remove="tag"></div>
</div>
css修改:
.ui-pagination-container {
height: 34px;
line-height: 34px;
}
.ui-pagination-container .ui-pagination-page-item a {
display:inline-block;
font-size: 14px;
padding: 0px 10px;
background: #fff;
border: 1px solid #e6e6e6;
color: #888;
margin: 0 3px;
text-decoration: none;
}
.ui-pagination-container .ui-pagination-page-item2 {
display:inline-block;
font-size: 14px;
padding: 0px 10px;
background: #fff;
border: 1px solid #e6e6e6;
color: #568dbd;
margin: 0 3px;
text-decoration: none;
}.ui-pagination-page-item1 {
display:inline-block;
font-size: 14px;
padding: 0px 10px;
background: #009688;
border: 1px solid #009688;
color: #fff;
margin: 0 3px;
text-decoration: none;
}
.ui-pagination-container .ui-pagination-page-item a:hover {
display:block;
background: #009688;
border: 1px solid #009688;
color: #fff!important;
/* border-color: #568dbd;
color: #568dbd; */
text-decoration: none;
}
.ui-pagination-container .ui-pagination-page-item a:hover {
display:block;
background: #009688;
border: 1px solid #009688;
color: #fff!important;
/* border-color: #568dbd;
color: #568dbd; */
text-decoration: none;
}
.ui-pagination-container .ui-pagination-page-item:active {
background: #568dbd;
border-color: #568dbd;
color: #fff;
cursor: default;
}
感谢:
https://blog.csdn.net/zhengxiangwen/article/details/63815551 中page.html的方法,自己进行修改