Layui超链接分页的实现

后端数据回显查看之前的博文: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页都显示出来即可。上面就是个人的分析,如有不懂或错误请留言交流。

Leave a Reply