Spring Boot + JPA + Freemarker 实现后端分页 完整示例
2017-09-13 14:35
411 查看
Spring Boot + JPA + Freemarker 实现后端分页 完整示例
界面效果
螢幕快照 2017-07-28 15.34.42.png
螢幕快照 2017-07-28 15.34.26.png
螢幕快照 2017-07-28 15.17.00.png
螢幕快照 2017-07-28 15.16.09.png
螢幕快照 2017-07-28 15.15.44.png
前端代码
<#-- 表格服务端分页:完美简单实现 http://v4-alpha.getbootstrap.com/components/pagination/--> <nav aria-label="Page navigation"> <ul class="pagination pagination-lg justify-content-center"> <#assign totalPages = pageResult.totalPages> <#assign totalElements = pageResult.totalElements> <#assign number = pageResult.number> <#assign first = pageResult.first> <#assign last = pageResult.last> <#--上一页--> <#if first> <li class="page-item"> <a class="page-link" href="#">上一页</a> </li> <#else> <li class="page-item"> <a class="page-link" href="wotuView?page=${number-1}&size=20">上一页</a> </li> </#if> <#--小于等于10页全部显示--> <#if totalPages <= 10> <#list 1..totalPages as pageIndex> <#if number == pageIndex> <li class="page-item active"> <a class="page-link" href="wotuView?page=${pageIndex}&size=20">${pageIndex}</a> </li> <#else> <li class="page-item active"> <a class="page-link" href="wotuView?page=${pageIndex}&size=20">${pageIndex}</a> </li> </#if> </#list> </#if> <#--大于10页:显示前5页,最后3页,中间用 ...--> <#if totalPages gt 10> <#--显示前5页--> <#list 1..5 as pageIndex> <#if number == pageIndex> <li class="page-item active"> <a class="page-link" href="wotuView?page=${pageIndex}&size=20">${pageIndex}</a> </li> <#else> <li class="page-item"> <a class="page-link" href="wotuView?page=${pageIndex}&size=20">${pageIndex}</a> </li> </#if> </#list> <#--中间部分的显示 ... number: currentPage, 区间逻辑的判断--> <#if number == 6 > <li class="page-item active"> <a class="page-link" href="wotuView?page=${number}&size=20">${number}</a> </li> <li class="page-item"> <a class="page-link" href="#">...</a> </li> <#elseif number == totalPages-3> <li class="page-item"> <a class="page-link" href="#">...</a> </li> <li class="page-item active"> <a class="page-link" href="wotuView?page=${number}&size=20">${number}</a> </li> <#elseif number gt 6 && number lt totalPages-3> <li class="page-item"> <a class="page-link" href="#">...</a> </li> <li class="page-item active"> <a class="page-link" href="wotuView?page=${number}&size=20">${number}</a> </li> <li class="page-item"> <a class="page-link" href="#">...</a> </li> <#else> <li class="page-item"> <a class="page-link" href="#">...</a> </li> </#if> <#--显示最后3页--> <#list totalPages-2..totalPages as pageIndex> <#if number == pageIndex> <li class="page-item active"> <a class="page-link" href="wotuView?page=${pageIndex}&size=20">${pageIndex}</a> </li> <#else> <li class="page-item"> <a class="page-link" href="wotuView?page=${pageIndex}&size=20">${pageIndex}</a> </li> </#if> </#list> </#if> <#--下一页--> <#if last> <li class="page-item"> <a class="page-link" href="#">下一页</a> </li> <#else> <li class="page-item"> <a class="page-link" href="wotuView?page=${number+1}&size=20">下一页</a> </li> </#if> </ul> <div class="center">总共 ${totalPages} 页, ${totalElements} 条记录</div> </nav>
后端代码
@RequestMapping(value = "wotuView", method = arrayOf(RequestMethod.GET)) fun wotuView(@RequestParam(value = "page", defaultValue = "0", required = false) page: Int, @RequestParam(value = "size", defaultValue = "10", required = false) size: Int, model: Model): ModelAndView { model.addAttribute("pageResult", getPageResult(page, size)) return ModelAndView("wotuView") } private fun getPageResult(page: Int, size: Int): Page<Image>? { val sort = Sort(Sort.Direction.DESC, "id") val pageable = PageRequest(page, size, sort) return imageRepository?.findAll(pageable) } interface ImageRepository : PagingAndSortingRepository<Image, Long> { @Query("SELECT a from #{#entityName} a where a.category like %?1%") fun findByCategory(category: String): MutableList<Image> @Query("select count(*) from #{#entityName} a where a.url = ?1") fun countByUrl(url: String): Int }
完整工程源码
https://github.com/EasyKotlin/chatper15_net_io_img_crawler相关文章推荐
- SpringBoot-使用JPA实现完整的CRUD和分页
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- SpringBoot-使用Mybatis实现完整的CRUD和分页
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- SpringBoot第二讲 利用Spring Data JPA实现数据库的访问(二)_分页和JpaSpecificationExecutor接口介绍
- Spring boot data JPA 自定义JPQL语句,以及PagingAndSortingRepository接口实现分页查询
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- 在Spring Boot中使用Spring-data-jpa实现分页查询(转)
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- springboot学习笔记5(JPA 实现分页、排序、返回map集合)
- SpringBoot JPA实现增删改查、分页、排序、事务操作等功能
- Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页示例
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- springBoot+easyui +spring data JPA 实现分页
- SpringBoot进阶之JPA实现分页、排序
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- SpringBoot第二讲 利用Spring Data JPA实现数据库的访问(二)_分页和JpaSpecificationExecutor接口介绍