文档章节

freemaker简单分页功能

了不起的盖茨比A
 了不起的盖茨比A
发布于 06/05 17:47
字数 429
阅读 48
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

<#-- 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 />

了不起的盖茨比A
粉丝 6
博文 5
码字总数 1181
作品 0
深圳
后端工程师
私信 提问
加载中
请先登录后再评论。
我的架构演化笔记 功能1: 基本的用户注册

“咚咚”,一阵急促的敲门声, 我从睡梦中惊醒,我靠,这才几点,谁这么早, 开门一看,原来我的小表弟放暑假了,来南京玩,顺便说跟我后面学习一个网站是怎么做出来的。 于是有了下面的一段...

强子哥哥
2014/05/31
976
3
基于 ThinkPHP 的内容管理系统--歪酷CMS

歪酷网站管理系统(歪酷CMS)是一款基于THINKPHP框架开发的PHP+MYSQL网站建站程序,本程序实现了文章和栏目的批量动态管理,支持栏目无限分类,实现多管理员管理,程序辅助功能也基本实现了常见的文...

鲁大在线
2013/02/19
7K
2
N简单CMS

N简单CMS能够让网站开发者更快速、灵活、简单的开发网站。 N简单CMS有以下特点: 更简单和自由的模板标签调用 专注于人性化的管理和操作 基于完全php5框架Kohana2.3.4开发 资源调用和消耗更低...

匿名
2013/02/26
3.2K
0
Swing界面分析和调试工具--Swing Inspector

Swing Inspector是一个Java Swing/AWT用户界面分析和调试工具,功能与firebug类似,具有强大的Swing/AWT用户界面分析和调试相关功能。 适用于从java swing初级到高级的所有开发人员,能够快速...

匿名
2013/03/06
3.4K
0
iOS 语音识别

OpenEars是一个开源的iOS类库,用于在iPhone和iPad实现语音识别功能。本demo利用此开源类库实现了简单的语音识别。可以识别:CHANGE、LEFT、RIGHT、FORWARD、BACKWARD、GO等英文,其他语素需...

匿名
2013/03/15
6.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

在视图控制器之间传递数据 - Passing Data between View Controllers

问题: I'm new to iOS and Objective-C and the whole MVC paradigm and I'm stuck with the following: 我是iOS和Objective-C以及整个MVC范例的新手,但我坚持以下几点: I have a view th......

fyin1314
20分钟前
6
0
Elasticsearch中mapping值得注意的一些小细节

简介 在Elasticsearch中mapping有很多可以配置的地方,但是使用多了就会发现,一般情况有关mapping最常用、也最实用的就简单的几个需要注意的地方。 下面就简单的介绍一下关于这些mapping中值...

trayvon
24分钟前
0
0
趣味编程-大鱼吃小鱼(5-7岁)

上一节老师教小朋友们编写了摘星星的游戏,今天跟着了老师学一下大鱼吃小鱼这个游戏吧!拿上你们的平板,跟着老师一起来做吧。 防止失联,点个“在看”!多多转发分享是老师录制视频的动力哦...

rainbow0124
今天
1
0
大集合!写作辅助工具

↑公众号关注 “Graph-AI” 专注于 图机器学习 大集合!论文写作辅助工具 这里收集论文写作过程中的辅助工具,比如包括Latex、画图、图表、语法、词语搭配、文献查找\下载\整理、翻译等。 会...

chengsen
08/01
0
0
SSL指纹的自定义功能-VMLogin 中文版防关联指纹浏览器在1.2.6.7 版本更新中加入

VMLogin 中文版指纹浏览器 在本次1.2.6.7 版本更新中加入了SSL指纹的自定义功能。 VMLogin 中文版浏览器:https://www.vmlogin.cc/ 主要可以设置 密码套件 的个数和顺序,这样能可以对抗一些...

VMlogin中文版防关联浏览器
35分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部