文档章节

js版的oschian分页类

开源中国最帅没有之一
 开源中国最帅没有之一
发布于 2015/11/30 00:47
字数 614
阅读 119
收藏 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
博文 20
码字总数 11484
作品 5
成都
程序员
Ext JS 4即将正式发布,值得期待

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

张金富
2011/11/04
0
2
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
pdf.js插件使用记录,在线打开pdf

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

yanbigfeg
08/20
0
0
MVC如何使用开源分页插件shenniu.pager.js

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

神牛步行3
2016/12/06
0
0
基于 jQuery 的 JavaScript 分页组件 - Pagination

Pagination 是一个基于 jQuery 实现的一个简单的 JavaScript 分页组件,主要实现以下功能: 1. 方便在 JavaScript 中对后端分页数据进行展示 2. 自动生成分页组件,包括首页、页码、末页、页...

勤劳的小木匠
07/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

android webrtc使用opensl es

1. java层开启开关 peerConnectionParameters = new PeerConnectionClient.PeerConnectionParameters(); 接口中的useOpensles参数设置为true 2. /system/etc/permissions/下新增and......

bill_shen
17分钟前
0
0
读《高性能mysql》记录

1 2

李佳顺
18分钟前
0
0
Element UI框架+Vue开发搭建示例

一、关于Element 1.Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,官方网址:http://element-cn.eleme.io/#/zh-CN 2.Element UI 是饿了么前端团队倾情打造htt...

tianma3798
21分钟前
2
0
Fragment整理

1、Fragment父类 Fragment的父类有两个,分别为android.app.Fragment和android.support.v4.app.Fragment。建议使用android.support.v4.app.Fragment。因为此Fragment在所有的android版本中可...

西米小娅
27分钟前
0
0
mysql报错:所选列未在GROUP BY子句中 的解决方法(laravel框架)

数据库配置文件database.php文件的 'mysql' => [ 'strict' => false] strict改为false,应该是开启宽松模式,就不会报错了...

郭周园
30分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部