Layui超链接分页的实现

2019-07-11 wjy329 前端学习 47

后端数据回显查看之前的博文:Spring Boot之分页
Layui的分页是JS动态生成的,这样搜索引擎抓取不到分页的数据,模拟抓取时,是一片空白,没有数据,传统的超链接分页则是可以抓取的,有利于SEO。下面我们就来实现一下超链接分页的laypage。
先看效果:



先上代码,下面仔细分析:
<div class="layui-box layui-laypage" th:with="maxButtons=10,floatButtons=5">
<!-- 上一页 -->
<th:block th:if="${articlePage.currentPage == 1}"><a class="layui-disabled">上一页</a></th:block>
<th:block th:if="${articlePage.currentPage > 1}"><a th:href="@{'/blog/pages?page='+${articlePage.currentPage-1}}">上一页</a></th:block>

<!-- 首页 -->
<span th:if="${articlePage.currentPage == 1}" class="layui-laypage-curr"><em class="layui-laypage-em" style="background-color:#009688;"></em><em>1</em></span>
<th:block th:if="${articlePage.currentPage > 1}"><a th:href="@{'/blog/pages?page=1'}">1</a></th:block>

<!-- 总页数小于maxButtons时,全部显示 -->
<th:block th:if="${articlePage.totalPage>=1 && articlePage.totalPage<=maxButtons}" th:each="i : ${#numbers.sequence(1,articlePage.totalPage-1)}">
<span th:if="${articlePage.currentPage == i}" class="layui-laypage-curr"><em class="layui-laypage-em" style="background-color:#009688;"></em><em th:text="${i}">页码</em></span>
<th:block th:if="${articlePage.currentPage != i}"> <a th:href="@{'/blog/pages?page='+${i}}" th:text="${i}">页码</a></th:block>
</th:block>

<th:block th:if="${articlePage.totalPage > maxButtons}">
<th:block th:if="${(articlePage.currentPage-(floatButtons/2)) <= 2}" th:each="i : ${#numbers.sequence(2,2+floatButtons-1)}">
<span th:if="${articlePage.currentPage == i}" class="layui-laypage-curr"><em class="layui-laypage-em" style="background-color:#009688;"></em><em th:text="${i}">页码</em></span>
<th:block th:if="${articlePage.currentPage != i}"><a th:href="@{'/blog/pages?page='+${i}}" th:text="${i}">页码</a></th:block>
</th:block>
<!-- ... -->
<th:block th:if="${(articlePage.currentPage-(floatButtons/2))>2}"><a>...</a></th:block>

<th:block th:if="${((articlePage.currentPage-(floatButtons/2))>2) && ((articlePage.currentPage+(floatButtons/2)-(floatButtons%2==0?1:0)) < (articlePage.totalPage-1))}"
th:each="i : ${#numbers.sequence(articlePage.currentPage-(floatButtons/2),articlePage.currentPage+(floatButtons/2)-(floatButtons%2==0?1:0))}">
<span th:if="${articlePage.currentPage == i}" class="layui-laypage-curr"><em class="layui-laypage-em" style="background-color:#009688;"></em><em th:text="${i}">页码</em></span>
<th:block th:if="${articlePage.currentPage != i}"><a th:href="@{'/blog/pages?page='+${i}}" th:text="${i}">页码</a></th:block>
</th:block>

<!-- ... -->
<th:block th:if="${(articlePage.currentPage+(floatButtons/2)-(floatButtons%2==0?1:0)) < (articlePage.totalPage-1)}"><a>...</a></th:block>
<th:block th:if="${(articlePage.currentPage+(floatButtons/2)-(floatButtons%2==0?1:0)) >= (articlePage.totalPage-1)}" th:each="i : ${#numbers.sequence(articlePage.totalPage-floatButtons,articlePage.totalPage-1)}">
<span th:if="${articlePage.currentPage == i}" class="layui-laypage-curr"><em class="layui-laypage-em" style="background-color:#009688;"></em><em th:text="${i}">页码</em></span>
<th:block th:if="${articlePage.currentPage != i}"><a th:href="@{'/blog/pages?page='+${i}}" th:text="${i}">页码</a></th:block>
</th:block>
</th:block>

<!-- 最后一页 -->
<span th:if="${articlePage.totalPage>1 && articlePage.currentPage == articlePage.totalPage}" class="layui-laypage-curr"><em class="layui-laypage-em" style="background-color:#009688;"></em><em th:text="${articlePage.totalPage}">页码</em></span>
<th:block th:if="${articlePage.totalPage>1 && articlePage.currentPage != articlePage.totalPage}"><a th:href="@{'/blog/pages?page='+${articlePage.totalPage}}" th:text="${articlePage.totalPage}">页码</a></th:block>


<!-- 下一页 -->
<th:block th:if="${articlePage.currentPage >= articlePage.totalPage}"><a class="layui-disabled">下一页</a></th:block>
<th:block th:if="${articlePage.currentPage < articlePage.totalPage}"><a th:href="@{'/blog/pages?page='+${articlePage.currentPage+1}}">下一页</a></th:block>

</div>
articlePage.currentPage : 当前页码,后台返回的参数
articlePage.totalPage:总页数,后台返回的参数
maxButtons:最小显示页码数,即总页数小于等于这个数,页码将会全部显示,不会出现省略号,本例中为10
floatButtons:最多展示页码数,即总页数大于maxButtons时,除首尾页码外,还需显示的页码数,本例为5

上一页、首页、最后一页、下一页均是固定页码数,代码易懂;总页数小于maxButtons时,页码全部显示,代码也很容易理解;下面主要说有省略号的情况。
最外层先判断页码总数大于最小显示页码数,即 articlePage.totalPage > maxButtons:
1. articlePage.currentPage-(floatButtons/2)) <= 2 :当前页减去最多展示页码数的一半小于等于2时,这时候,当前页连续的floatButtons个页码为前5(这里的floatButtons=5)项(除页码1外),此时在后面加上省略号即可。
2. articlePage.currentPage-(floatButtons/2))>2 :与1相反,此时会在页码1后有省略号页码,之后显示当前页连续的5个页码
3. ((articlePage.currentPage-(floatButtons/2))>2) && ((articlePage.currentPage+(floatButtons/2)-(floatButtons%2==0?1:0)) < (articlePage.totalPage-1)) :&&前的部分如情况2所讲,后半部分的意思是当前页加上它之后的两个页码(当前页为中间值,加上后2个一共是5个,即floatButtons),是否小于总页数减去1,如果小于还有省略号
4.紧接3后的省略号
5.与3相反,如果大于等于,则不需要末尾的省略号,当前页面连续5页都显示出来即可。
上面就是个人的分析,如有不懂或错误请留言交流。

参考博客:【thymeleaf】分页代码  https://blog.csdn.net/sayyy/article/details/80888347
本文作者:wjy329
版权声明:本博客除特殊说明外均属本人原创。如需转载请署名作者及文章出处。
评论