环境: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>
转载于:https://blog.51cto.com/icyore/1566598