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