js版的oschian分页类

最新推荐文章于 2024-03-18 18:03:28 发布

weixin_33804990

最新推荐文章于 2024-03-18 18:03:28 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/itudou/blog/537203

本文介绍了一个实用的分页组件的设计与实现过程，详细解释了如何通过JavaScript创建一个高度可配置的分页导航，包括页码显示逻辑、上一页与下一页的处理等关键功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

代码如下：

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，和增加了灵活的预留页配置

转载于:https://my.oschina.net/itudou/blog/537203