环境:Freemarker
任务:显示一个page的数据,并实现翻页功能
翻页效果:
说明:
1、翻页效果图中总页数只有1,如果是多页的话,会显示多个数字,最多为5,超出5页,显示当前页面前后两个页面链接。
2、代码中Css效果已经去除,请自行添加。
CODE:
<div> <div> <table> [#list page.content as pageContent] <tr> <td> <span>${pageContent.id}</span> </td> </tr> [/#if] </table> </div> <div id="" class=""> [#if page.totalPages = 0] <span class="page2"> [@spring.messageArgs "tenement.page.display", [1 , 1]/] <a name="changePage" href="" class=""> <span style="">1</span> </a> </span> <span class="page1"> <a class=" "><<${message("page.first")}</a> <a class=" "><${message("page.previous")}</a> <a class=" ">${message("page.next")}></a> <a class=" ">${message("page.last")}>></a> </span> [#else] <span class="page2"> <a> [@spring.messageArgs "tenement.page.display", [pageable.pageNumber + 1 , page.totalPages]/] </a> [#if page.totalPages > 4 ] [#if pageable.pageNumber > 1 && pageable.pageNumber < page.totalPages - 2] [#list pageable.pageNumber - 2.. pageable.pageNumber + 2 as m] <a name="" href="?page=${m}" class=""> [#if pageable.pageNumber = m] <span style="">${m+1}</span> [#else] ${m+1} [/#if] </a> [/#list] [/#if] [#if pageable.pageNumber < 2 ] [#list 0.. 4 as m] <a name="" href="?page=${m}" class=""> [#if pageable.pageNumber = m] <span style="">${m+1}</span> [#else] ${m+1} [/#if] </a> [/#list] [/#if] [#if pageable.pageNumber > page.totalPages - 3 ] [#list page.totalPages - 5.. page.totalPages - 1 as m] <a name="changePage" href="?page=${m}" class=""> [#if pageable.pageNumber = m] <span style="">${m+1}</span> [#else] ${m+1} [/#if] </a> [/#list] [/#if] [/#if] [#if page.totalPages < 5 ] [#list 0.. page.totalPages - 1 as m] <a name="" href="?page=${m}" class=""> [#if pageable.pageNumber = m] <span style="">${m+1}</span> [#else] ${m+1} [/#if] </a> [/#list] [/#if] </span> <span class="page1"> <a name="" href="?page=0" class=""><<${message("page.first")}</a> [#if page.hasPrevious()] <a name="" href="?page=${page.number - 1}" class=""><${message("page.previous")}</a> [#else] <a class=" "><${message("page.previous")}</a> [/#if] [#if page.hasNext()] <a name="" href="?page=${page.number + 1}" class="">${message("page.next")}></a> [#else] <a class=" ">${message("page.next")}></a> [/#if] <a name="" href="?page=${page.totalPages - 1}" class="">${message("page.last")}>></a> </span> [/#if] </div> </div>