Spring Boot + JPA + Freemarker 实现后端分页 完整示例
《Kotlin极简教程》正式上架:
非常感谢您亲爱的读者,大家请多支持!!!有任何问题,欢迎随时与我交流~
界面效果
前端代码
<#-- 表格服务端分页:完美简单实现 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...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。