PageHelper+FreeMarker分页模板

最新推荐文章于 2020-03-24 13:57:40 发布

原创最新推荐文章于 2020-03-24 13:57:40 发布 · 724 阅读

0 ·

CC 4.0 BY-SA版权

后端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种自定义分页组件的实现方式，详细解释了如何通过前端技术动态生成分页按钮，并展示了如何处理翻页逻辑及页面跳转功能。此分页组件支持高亮当前页、显示省略号以简化长分页序列等特性。

<ul id="_page" class="pagination">
    <#--    是否显示上一页-->
    <#--    定义当前页-->
    <#assign c=p.pageNum>
    <#assign t=p.pages>
    <#assign length=t-c>
    <#if c gt 1>
        <li onclick="_page(${c},'d')">
            <a href="#"><</a>
        </li>
    </#if>
    <#if c gt 4>
        <li>
            <a href="#" onclick="_page('1','t')">1</a>
        </li>
        <li>
            <a href="#">…</a>
        </li>
    </#if>
    <!--总页数是否大于5划分-->
    <#if t gt 5>
        <#if c gte 3>
            <#if length gt 2>
                <!--两端显示-->
                <#list c-2..c+2 as mt>
                    <#if mt=c>
                    <#--                        高亮当前页-->
                        <li class="active">
                            <a href="#">${mt}</a>
                        </li>
                    <#else>
                        <li onclick="_page('${mt}','t')">
                            <a href="#">${mt}</a>
                        </li>
                    </#if>
                </#list>
            <#else>
                <#list c-3..t as mt>
                    <#if mt=c>
                    <#--                        高亮当前页-->
                        <li class="active">
                            <a href="#">${mt}</a>
                        </li>
                    <#else>
                        <li onclick="_page('${mt}','t')">
                            <a href="#">${mt}</a>
                        </li>
                    </#if>
                </#list>
            </#if>
        <#else>
            <#list 1..5 as mt>
                <#if mt=c>
                <#--                        高亮当前页-->
                    <li class="active">
                        <a href="#">${mt}</a>
                    </li>
                <#else>
                    <li onclick="_page('${mt}','t')">
                        <a href="#">${mt}</a>
                    </li>
                </#if>
            </#list>
        </#if>
    <#else>
        <#list 1..t as mt>
            <#if mt=c>
            <#--                        高亮当前页-->
                <li class="active">
                    <a href="#">${mt}</a>
                </li>
            <#else>
                <li onclick="_page('${mt}','t')">
                    <a href="#">${mt}</a>
                </li>
            </#if>
        </#list>
    </#if>
    <!--是否显示省略号-->
    <#if length gt 2 && t gt 5>
        <li>
            <a href="#">…</a>
        </li>
        <li>
            <a href="#" onclick="_page(${t},'t')">${t}</a>
        </li>
    </#if>
    <#if c lt t>
        <li onclick="_page(${c},'u')">
            <a href="#">></a>
        </li>
    </#if>
    <#if t gt 5>
        <li style="display: inline-block;float: left">
            <input type="text" id="skipInput" name="skipInput" id="skipInput"/>

        </li>
        <li onclick="{
           var _pageTo = $('input[name=skipInput]').val();
           _page(_pageTo,'t');
        }">
            <a href="#">GO</a>
        </li>
    </#if>
</ul>
<style>
    #_page li {
        padding-top: 10px;
        height: 40px;
        width: 40px;
        text-align: center;
        border: 1px solid #e2e2e2;
        border-radius: 3px;
        margin-right: 5px;
        cursor: pointer;
    }

    #_page .active {
        background: #4680ff;
    }
    #skipInput{
        width: 20px;
        height: 20px;
        border: hidden;
        background: #f8f9fa;
    }
    #_page{
        position: relative; left: -30%;
    }

</style>