Spring Boot + JPA + Freemarker 實(shí)現(xiàn)后端分頁 完整示例

界面效果

螢?zāi)豢煺?2017-07-28 15.34.42.png

螢?zāi)豢煺?2017-07-28 15.34.26.png

螢?zāi)豢煺?2017-07-28 15.17.00.png

螢?zāi)豢煺?2017-07-28 15.16.09.png

螢?zāi)豢煺?2017-07-28 15.15.44.png

前端代碼

<#-- 表格服務(wù)端分頁：完美簡單實(shí)現(xiàn) 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, 區(qū)間邏輯的判斷-->
            <#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