freemaker简单分页功能

原创
2020/06/05 17:47
阅读数 139
<#-- page 页码 totalPages 总页数 -->
<#macro pageTag page totalPages url>
    <style>
        .china-pages{
            width: 100%;
            height: 36px;
            text-align: center;
            margin: 30px auto;
            font-size: 14px;
            color: #999;
        }
        .china-pages a{
            height: 34px;
            border: 1px solid #e4e4e4;
            line-height: 34px;
            text-align: center;
            display: inline-block;
            padding: 0 13px;
            font-size: 14px;
            color: #999;
            margin: 0 3px;
        }
        .china-pages a:hover{
            color: #c00;
            border-color: #c00;
        }
        .china-pages a.cur{
            background: #c00;
            color: #fff;
            border-color: #c00;
        }
        .china-pages span{ margin: 0 3px;}
        .china-pages input{
            width: 48px;
            height: 34px;
            padding: 0 4px;
            line-height: 34px;
            border: 1px solid #e4e4e4;
            text-align: center;
            background: #fff;
            color: #666;
        }
        .china-pages input[type='button']:hover{
            background: #c00;
            color: #fff;
            border-color: #c00;
        }
    </style>
 
    <div class="china-pages">
        <#if (page <= 1) >
            <a>上一页</a>
        <#else>
            <a class="page-prev" href="${url?replace('{0}',page-1)}">上一页</a>
        </#if>
        <#if (totalPages <= 9 )>
            <#assign start=1/>
            <#assign end = totalPages/>
            <#list start..end as pageIndex>
                <#if (pageIndex == page)>
                    <a class="cur">${pageIndex}</a>
                <#else>
                    <a href="${url?replace('{0}',pageIndex)}">${pageIndex}</a>
                </#if>
            </#list>
        <#else>
            <#if (page <= 8)>
                <#assign start = 1/>
                <#assign end = 9/>
            <#else>
                <#if (page == totalPages)>
                    <#assign start = page-7/>
                <#else>
                    <#if (page+1==totalPages)>
                        <#assign start = page-8/>
                    <#else>
                        <#assign start = page-7/>
                    </#if>
                </#if>
                <#if (page+1<totalPages)>
                    <#assign end = page+1/>
                <#elseif (page>=totalPages||page+1>=totalPages)>
                    <#assign end = totalPages/>
                </#if>
            </#if>
            <#list start..end as pageIndex>
                <#if (pageIndex == page)>
                    <a class="cur">${pageIndex}</a>
                <#else>
                    <a href="${url?replace('{0}',pageIndex)}">${pageIndex}</a>
                </#if>
            </#list>
            <#if (page+1 <= totalPages && totalPages > 9)>
                <span>...</span>
            </#if>
        </#if>
        <#if (totalPages <= page) >
            <a>下一页</a>
        <#else>
            <a class="page-next" href="${url?replace('{0}',page+1)}">下一页</a>
        </#if>
        <span>共${totalPages}页</span>
        <input type="hidden" id="totalPages" value="${totalPages}"/>
        <input type="hidden" id="pageUrl" value="${url}"/>
        <#if (totalPages > 4) >
            <span>转到</span>
            <input type="text" id="inputPageIndex">
            <span>页</span>
            <input id="pageButton" type="button" value="确认">
        </#if>
    </div>

    <script>
        //分页功能
        var pageTag = {
            init: function () {
                $("#pageButton").click(function () {
                    var pageIndex = $("#inputPageIndex").val();
                    var pageUrl = $("#pageUrl").val();
                    var totalPage = $("#totalPages").val();
                    if(isNaN(pageIndex)){
                        alert("页码不正确");
                        return;
                    }

                    if(parseInt(totalPage)<parseInt(pageIndex)){
                        alert("页码超出范围");
                        return;
                    }
                    var url = pageUrl.replace("{0}",pageIndex);
                    pageTag.jump(url);
                });
            },
            jump: function (url) {
                window.location = url;
            }
        };
        $(function () {
            //分页标签初始化
            pageTag.init();
        });
    </script>
</#macro>

使用方式  url = /xxx.html?pageIndex={0}

<@page.pageTag page=searchResult.pageIndex totalPages=searchResult.totalPages url= url />

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部