前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Spring Boot + JPA + Freemarker 实现后端分页 完整示例Spring Boot + JPA + Freemarker 实现后端分页 完整示例

Spring Boot + JPA + Freemarker 实现后端分页 完整示例Spring Boot + JPA + Freemarker 实现后端分页 完整示例

作者头像
一个会写诗的程序员
发布2018-08-17 15:09:56
7400
发布2018-08-17 15:09:56
举报
文章被收录于专栏:一个会写诗的程序员的博客

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

前端代码

代码语言:javascript
复制
<#-- 表格服务端分页:完美简单实现 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>

后端代码

代码语言:javascript
复制
    @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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.07.28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Spring Boot + JPA + Freemarker 实现后端分页 完整示例
    • 界面效果
      • 前端代码
        • 后端代码
          • 完整工程源码
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档