阅读背景:

PageHelper+FreeMarker分页模板

来源:互联网 

 

<ul id="_page" class="pagination">
    <#--    是否显示上一页-->
    <#--    定义当前页-->
    <#assign c=p.pageNum>
    <#assign t=p.pages>
    <#assign length=t-c>
    <#if c gt 1>
        <li οnclick="_page(${c},'d')">
            <a href="/go.html?url=#"><</a>
        </li>
    </#if>
    <#if c gt 4>
        <li>
            <a href="/go.html?url=#" οnclick="_page('1','t')">1</a>
        </li>
        <li>
            <a href="/go.html?url=#">…</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="/go.html?url=#">${mt}</a>
                        </li>
                    <#else>
                        <li οnclick="_page('${mt}','t')">
                            <a href="/go.html?url=#">${mt}</a>
                        </li>
                    </#if>
                </#list>
            <#else>
                <#list c-3..t as mt>
                    <#if mt=c>
                    <#--                        高亮当前页-->
                        <li class="active">
                            <a href="/go.html?url=#">${mt}</a>
                        </li>
                    <#else>
                        <li οnclick="_page('${mt}','t')">
                            <a href="/go.html?url=#">${mt}</a>
                        </li>
                    </#if>
                </#list>
            </#if>
        <#else>
            <#list 1..5 as mt>
                <#if mt=c>
                <#--                        高亮当前页-->
                    <li class="active">
                        <a href="/go.html?url=#">${mt}</a>
                    </li>
                <#else>
                    <li οnclick="_page('${mt}','t')">
                        <a href="/go.html?url=#">${mt}</a>
                    </li>
                </#if>
            </#list>
        </#if>
    <#else>
        <#list 1..t as mt>
            <#if mt=c>
            <#--                        高亮当前页-->
                <li class="active">
                    <a href="/go.html?url=#">${mt}</a>
                </li>
            <#else>
                <li οnclick="_page('${mt}','t')">
                    <a href="/go.html?url=#">${mt}</a>
                </li>
            </#if>
        </#list>
    </#if>
    <!--是否显示省略号-->
    <#if length gt 2 && t gt 5>
        <li>
            <a href="/go.html?url=#">…</a>
        </li>
        <li>
            <a href="/go.html?url=#" οnclick="_page(${t},'t')">${t}</a>
        </li>
    </#if>
    <#if c lt t>
        <li οnclick="_page(${c},'u')">
            <a href="/go.html?url=#">></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 οnclick="{
           var _pageTo = $('input[name=skipInput]').val();
           _page(_pageTo,'t');
        }">
            <a href="/go.html?url=#">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><ul id="_page" class="pagination"



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: