文档章节

js版的oschian分页类

开源中国最帅没有之一
 开源中国最帅没有之一
发布于 2015/11/30 00:47
字数 614
阅读 125
收藏 6

代码如下:

page.js代码如下

/**
* 分页类
* pageCount     // 分页总数
* currentPage   // 当前页
* link          // 连接地址
*/
function Page(opts) {
    this.opts = {
        // 基本配置
        pageCount:          0,                       // 分页总数
        currentPage:        1,                       // 当前页码
        link:               '',                      // 分页连接地址前缀
        lastNum:            4,                       // 尾部页码数字
        end:                9,                       // 在7页以前显示的分页数量要和7页以后的分页数量一直
        // 文字常量
        prevText:           '上一页',                 // 上一页文字
        nextText:           '下一页',                 // 下一页文字
        // 样式配置
        pageListClass:      'page-list',             // 分页数字样式
        prevClass:          'page-prev',             // 上一页样式
        nextClass:          'page-next',             // 下一页样式
        currentPageClass:   'page-current',          // 当前页样式
        disabledClass:      'page-disabled',         // 分页连接不可用
    };
    // 覆写属性
    for(key in opts) {
        this.opts[key] = opts[key];
    }
    opts = this.opts;

    this.htlm = '';
    // 获取分页html
    this.getHtml = function() {
        if(opts.currentPage > opts.pageCount) {
            opts.currentPage = opts.pageCount;
        }
        if(opts.currentPage < 1) {
            opts.currentPage = 1;
        }
        this.html = '';
        this.getPrevPage();             // 上一页
        this.getFirstPage();            // 首页
        this.getPageNumber();           // 页码
        this.getNextPage();             // 下一页
        return this.html;
    };
    // 获取页码
    this.getPageNumber = function() {
        // 1 2-11 30
        // 显示更多
        if(opts.pageCount > 11) {

            // 当前页码前面有3个页码,当前页码后面有6个页码 == 10
            var start = 2;
            if(opts.currentPage > 5) {
                start = opts.currentPage - 3;
                opts.end = opts.currentPage + opts.lastNum;
            }
            if(opts.currentPage + opts.lastNum > opts.pageCount) {
                opts.end = opts.pageCount;
            }
            for(var i = start; i <= opts.end; i++) {
                var classArr = [];

                classArr.push(opts.pageListClass);
                if(getCurrentPage(i)) {
                    classArr.push(getCurrentPage(i));
                    this.html += '<em class="' + classArr.join(' ') + '">' + i + '</em>';
                } else {
                    this.html += '<a href="' + getLink(i) + '" class="' + classArr.join(' ') + '">' + i + '</a>';
                }
            }

            // 是否显示尾页逻辑
            if((opts.currentPage + opts.lastNum) < opts.pageCount) {
                this.getLastPage(); // 尾页
            }
        } else {
            for(var i = 2; i <= opts.pageCount; i++) {
                var classArr = [];

                classArr.push(opts.pageListClass);
                if(getCurrentPage(i)) {
                    classArr.push(getCurrentPage(i));
                    this.html += '<em class="' + classArr.join(' ') + '">' + i + '</em>';
                } else {
                    this.html += '<a href="' + getLink(i) + '" class="' + classArr.join(' ') + '">' + i + '</a>';
                }

            }
        }
    };
    // 获取首页页码
    this.getFirstPage = function() {
        var classArr = [];

        classArr.push(opts.pageListClass);
        if(getCurrentPage(1)) {
            classArr.push(getCurrentPage(1));
        }
        if(getCurrentPage(1)) {
            this.html += '<em class="' + classArr.join(' ') + '">' + 1 + '</em>';
        } else {
            this.html += '<a href="' + getLink(1) + '" class="' + classArr.join(' ') + '">1</a>';
        }
    };
    // 获取尾页页码
    this.getLastPage = function() {
        var classArr = [];

        classArr.push(opts.pageListClass);
        if(getCurrentPage(opts.pageCount)) {
            classArr.push(getCurrentPage(opts.pageCount));
        }
        if(getCurrentPage(opts.pageCount)) {
            this.html += '<em class="' + classArr.join(' ') + '">' + opts.pageCount + '</em>';
        } else {
            this.html += '<a href="' + getLink(opts.pageCount) + '" class="' + classArr.join(' ') + '">' + opts.pageCount + '</a>';
        }

    };
    // 获取上一页
    this.getPrevPage = function() {
        var classArr = [];
        var href = "";

        classArr.push(opts.prevClass);
        if(opts.currentPage == 1) {
            // 如果是在第一页则不显示上一页
            return;
            classArr.push(opts.disabledClass);
            href = 'javascript:;';
        } else {
            href = getLink(opts.currentPage - 1);
        }
        this.html += '<a href="' + href + '" class="' + classArr.join(' ') + '">' + opts.prevText + '</a>';
    };
    // 获取下一页
    this.getNextPage = function() {
        var classArr = [];
        var href = "";

        classArr.push(opts.nextClass);
        if(opts.currentPage == opts.pageCount) {
            // 如果是在最后一页则不显示下一页
            return;
            classArr.push(opts.disabledClass);
            href = 'javascript:;';
        } else {
            href = getLink(opts.currentPage + 1);
        }
        this.html += '<a href="' + href + '" class="' + classArr.join(' ') + '">' + opts.nextText + '</a>';
    };
    // 获取连接路径
    function getLink(num) {
        return opts.link+ '/' + num;
    }
    // 检测是否是当前页
    function getCurrentPage(pageNum) {
        if(opts.currentPage == pageNum) {
            return opts.currentPageClass;
        }
        return '';
    }
};
module.exports = Page;


调用如下:

// 分页
var p = new Page({
    pageCount: Math.ceil(result[0] / pageCount),
    currentPage: parseInt(currentPage),
    link: '/upload/packagelist'
});
// p.getHtml() // 返回拼装好的html

12-3 修复了bug,和增加了灵活的预留页配置

© 著作权归作者所有

共有 人打赏支持
开源中国最帅没有之一

开源中国最帅没有之一

粉丝 41
博文 21
码字总数 14151
作品 5
成都
程序员
私信 提问
Ext JS 4即将正式发布,值得期待

Ext JS是一个针对Web的UI库。它是市场上的轻量级工具,它通过抽象,支持开发人员不必强制性地编写HTML的源代码,而且允许开发人员灵活的扩展组件库或者通过简单强大的插件架构创建真实的插件...

张金富
2011/11/04
0
2
pdf.js插件使用记录,在线打开pdf

天记录一个js库:pdf.js。主要是实现在线打开pdf功能。因为项目需求需要能在线查看pdf文档,所以就研究了一下这个控件。 有些人很好奇,在线打开pdf文档浏览器不是支持吗。是的你说的都是现代...

yanbigfeg
08/20
0
0
可缓解 CPU 漏洞的 Chrome 64 出炉了,性能更稳

Chrome 新版本采用了最新的 6.4 版 V8 JavaScript 引擎,带来更快的性能,并减少内存资源的使用,此外,还强化了拦截弹出视窗的能力,Chrome 64 为 Meltdown 和 Spectre 等 CPU 漏洞带来了期...

周其
01/26
3.7K
16
MVC如何使用开源分页插件shenniu.pager.js

  最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了;虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(...

神牛步行3
2016/12/06
0
0
13 个最佳 JavaScript 数据表格库

JavaScript 是一种通常被用在网页开发中的编程语言。它主要是在互联网上的网页浏览器中开发出效果出众且可交互的特效。它是客户端脚本语言中的一种,是被用来作为通过用户的网页浏览器进行处...

oschina
2017/03/10
5K
7

没有更多内容

加载失败,请刷新页面

加载更多

docker快速搭建几个常用的第三方服务

本次和大家分享的内容是使用docker快速搭建工作中常用的第三方的服务,对于有一些互联网背景的公司来说,以下几个服务都是很需要的:redis,rabbit,elasticsearch; 如果想学习Java工程化、...

编程SHA
19分钟前
2
0
我的Linux系统九阴真经

在今天,互联网的迅猛发展,科技技术也日新月异,各种编程技术也如雨后春笋一样,冒出尖来了。各种创业公司也百花齐放百家争鸣,特别是针对服务行业,新型互联网服务行业,共享经济等概念的公...

linuxprobe16
28分钟前
5
0
Dubbo标签解析详解

在Spring继承dubbo时,会使用dubbo自定义的标签来定义相关的属性,常见的标签有<dubbo:application/>,<dubbo:registry/>,<dubbo:service/>等。对于这些标签的解析,dubbo都是使用的统一的方...

爱宝贝丶
33分钟前
3
0
网站彩蛋

图形类彩蛋 知乎 https://www.zhihu.com/ 想来知乎工作?请发送邮件到 jobs@zhihu.com 天猫 https://www.tmall.com/ 喵~ 加入我们吧 http://tb.cn/iS8NBOy 超级课程表 http://www.super.cn/...

临江仙卜算子
40分钟前
9
0
ThreadLocal父子线程之间的数据传递问题

一、问题的提出 在系统开发过程中常使用ThreadLocal进行传递日志的RequestId,由此来获取整条请求链路。然而当线程中开启了其他的线程,此时ThreadLocal里面的数据将会出现无法获取/读取错乱...

nonnetta
49分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部