(原)springboot + query.pagination 实现动态配置分页功能 + 自由调节表格宽度

效果图：

代码：

后台：

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)}"><<&nbsp;</a>
            </li>
            <li th:if="${listPages.hasPrevious()}" style="float:left;" class="ui-pagination-page-item">
            	<a href="/#" th:href="@{${curUrl}(page=${listPages.number-1})}"><&nbsp;</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}&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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})}">>&nbsp;</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)}">>>&nbsp;</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的方法，自己进行修改

(原)springboot + query.pagination 实现 动态配置 分页功能 + 自由调节表格宽度

猜你喜欢

(原)springboot + query.pagination 实现动态配置分页功能 + 自由调节表格宽度