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

總結

以上是生活随笔為你收集整理的Spring Boot + JPA + Freemarker 实现后端分页 完整示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。