文档章节

js版的oschian分页类

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

代码如下:

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
博文 16
码字总数 10837
作品 5
成都
程序员
android h5 js 匿名函数通信

android js 互相调用 支持js匿名函数接收 支持js json对象接收 支持js函数返回值获取 通过注解注入js方法,支持自定义方法名 github https://github.com/lwugang/android-js-bridge Add it i...

liwg ⋅ 04/25 ⋅ 0

开源书籍-JavaScript 编程精解

《JavaScript 编程精解》(Eloquent JavaScript)第三版,是由马尔奇·哈弗贝克(Marlin Haverbeke)JavaScript程序员编写的JS入门书籍,Marlin Haverbeke通晓多种编程语言,在Web开发方面积累...

marsdream ⋅ 06/04 ⋅ 0

Lynx技术分析-JS引擎扩展设计

JS Binding 技术 Lynx(一个高效的跨平台框架) 的 JS Binding 技术最主要的目的是搭建一个高效的与 JS 引擎解耦的通信桥梁,同时具备 JS 引擎切换的能力。该技术经历了多次迭代,最终通过抽...

hxxft ⋅ 05/15 ⋅ 0

hi-nginx-1.4.9 正式发布,支持 Javascript 后端开发

hi-nginx-1.4.9已经发布。 更新: 支持javascript后端开发 修复脚本搜索的一个bug 从这一版开始,hi-nginx开始支持javascript,这意味着把javascript应用于后端开发,将不再只有nodejs这唯一...

所以呢 ⋅ 05/14 ⋅ 0

code-rhythm:写了个vscode扩展,让代码更有快感

项目地址 Github - onvno/code-rhythm 原因 写代码本身是件快乐的事情,但开发中总有各种烦恼。 有时候一个很简单的方法,因为不确定传参的形式,不确定返回形式,不确定具体用法,就得翻墙,...

onvno_ ⋅ 06/07 ⋅ 0

thinkphp模型层Model、Logic、Service讲解

thinkphp模型层Model、Logic、Service讲解 时间:2014-08-24 15:54:56 编辑:一切随缘 文章来源:php教程网 已阅读:771 次 js特效源码,就从这里开始 我有疑问【PHP186论坛提问】 jS游戏桌球...

thinkyoung ⋅ 2015/09/01 ⋅ 0

Query.js - 类SQL前端数据查询类库

使用JavaScript实现的一个类SQL的用于在前端查询数据的类库。基本接口参考了thinkphp查询语法的实现。 Example Github 如何使用 实例方法 range Description 从数据中选取一个从开始索引(st...

Smohan ⋅ 05/19 ⋅ 0

Excel 开始支持使用 JavaScript 编写自定义函数

0. 概述 微软为 Excel 增加了使用 JavaScript 编写自定义函数的支持。 1. 示例 比如一个功能:两数之和加 : 我们可以使用 JavaScript 编写: 然后就像使用其它 Excel 内置函数一样,这样调用...

justjavac ⋅ 05/09 ⋅ 0

没有 Python,微软宣布 Excel 新增 JavaScript 支持

去年年底曾有外媒报道,由于社区用户的强烈要求,微软正考虑添加 Python 作为官方的一种 Excel 脚本语言。不过在昨天的 Build 2018 开发者大会上,微软没有透露有关 Python 支持的消息,而是...

王练 ⋅ 05/09 ⋅ 0

使用Kotlin:让Android与JS交互的详解

先来说说什么是JS交互: 说的俗一点就是通过我们项目中的控件来调用HTML里的JS代码,也可以通过JS来调用项目中的代码。 Android与JS之间的桥梁就是WebView了,我们是通过WebView来实现他们的...

富江___ ⋅ 06/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Android JNI 读写Bitmap的方法

Java层创建Bitmap,通过JNI将Bitmap传到C/C++进行处理 Java部分 public static native boolean greenBitmap(Bitmap bitmap); C/C++部分 JNIEXPORT jboolean JNICALL Java_com_test_Test_gree......

国仔饼 ⋅ 8分钟前 ⋅ 0

一次性让你懂async/await,解决回调地狱

什么是async? 欢迎留言讨论 async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示,在函数内部使用 await 来表示异步。相较于 Generator,async 函数的改进在于下面四点: 内置执...

阿K1225 ⋅ 8分钟前 ⋅ 0

angular常用命令

.下载更新操作 1.利用npm下载angular的命令行工具AngularCLI: npm install -g @angular/cli 2.下载jquery: npm install --save jquery 3.更新npm: npm i -g npm 4.更新angular: ng update ......

消散了的诗意 ⋅ 11分钟前 ⋅ 0

window.print 页面打印

定义和用法 print() 方法用于打印当前窗口的内容。 语法 window.print(); window.print() 实际上,是浏览器打印功能菜单的一种程序调用。与点击打印功能菜单一样,不能精确分页,不能设置纸型...

初学者的优化 ⋅ 11分钟前 ⋅ 0

魔兽世界 7.0版本上 PVE装备全攻略

  T套 因为大家应该都会打穿副本的所以具体是哪个boss我就不说了。   T1: 所有套装都在【熔火之心】出   T2: 头原来是在【奥妮克希亚的巢穴】改到黑翼之巢的奈法利安了,腿是在【熔火之...

wangchen1999 ⋅ 12分钟前 ⋅ 0

java.math.BigDecimal使用小结

原文地址 java.math.BigDecimal使用小结 divide方法 使用BigDecimal.divide方法时一定要考虑: 除数是否为0 商是否是无限小数 正确的使用方式 判断除数是否为0,是0做另外的处理逻辑 调用除法...

666B ⋅ 15分钟前 ⋅ 0

关于qstring转char乱码问题。

if (OpenClipboard(NULL)) { HGLOBAL hgClip; EmptyClipboard(); QByteArray byay = FValue.toLocal8Bit(); //转latin编码 char *bochsrc_line = byay.data(); hgClip = GlobalAlloc(GMEM_DD......

backtrackx ⋅ 15分钟前 ⋅ 0

了解SSH加密和连接过程

介绍 SSH或安全shell是安全协议,也是安全管理远程服务器的最常用方式。通过使用多种加密技术,SSH提供了一种机制,用于在双方之间建立加密安全连接,对彼此进行身份验证,以及来回传递命令和...

吴伟祥 ⋅ 21分钟前 ⋅ 0

微信小程序

小程序的基础配置:导航栏和tabbar 在app.json文件中配置导航栏和tabrbar 导航栏的设置 设置导航,背景黑色,文字白色,文字内容 { "pages":[ "pages/index/index", "pages/logs/l...

上官清偌 ⋅ 24分钟前 ⋅ 0

【转】百度坐标坐标系之间的转换(JS版代码)

/** * Created by Wandergis on 2015/7/8. * 提供了百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换 *///定义一些常量var x_PI = 3.1415926535897932...

HAVENT ⋅ 26分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部