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
}