京东质量社区 前年写的分页逻辑

卡农Lucas for 京东 · 2017年02月27日 · 最后由 卡农Lucas 回复于 2017年02月27日 · 1305 次阅读

前年写的平台分页逻辑,仅供参考。
改改硬编码的 html,可以直接拿去用。

/*
 * @id                控件的id,如<div id="myDivPaging1" class="pg"></div>
 * @totalPageCount    总页数
 * @showPageCount     期待页面展示多少页
 * @callback          回调函数,用来向服务器提交查询请求,并处理前段页面展示逻辑
 */

var TDPager = function (id, totalPageCount, showPageCount, callback) {
    this.$div = $('#' + id);
    this.cur = 1;
    this.total = totalPageCount;
    this.show = showPageCount;
    this.middle = Math.ceil(showPageCount / 2);
    this.cb= callback;

    this.$div.empty();
    this.cb(this.cur - 1);
    this.build();
}

/*
 * 构建分页空间的主要逻辑
 */
TDPager.prototype.build = function() {
    var _   = this;
    var pre = '<span class="prev">上一页</span>';
    var pg  = '<a><span class="pb_{0}">{1}</span></a>';
    var nxt = '<span class="next">下一页</span>';

    var builder = function(i) {
        _.$div.append(String.format(pg, i, i));
        var $a = _.$div.find('.pb_' + i).parent();
        $($a).on('click', { _this: _, pageIndex: i }, _.buildCallback);

        if(_.cur == i) {
            _.$div.find('.pb_' + i).parent().addClass('cur');
        }
    }

    _.$div.append(pre);
    var $pre = _.$div.find('span.prev');
    if(_.cur > 1) {
        $($pre).on('click', { _this: _, pageIndex: _.cur - 1 }, _.buildCallback);
        $($pre).css({
            'background':'#4573DC none repeat scroll 0% 0%',
            'color':'#FFF'
        });
    } else {
        $($pre).off('click');
        $($pre).css({
            'background':'#F5F5F5 none repeat scroll 0% 0%',
            'color':'#AAA'
        });
    }

    var start;
    var end;

    if(_.total <= _.show) {
        for(var i = 1; i <= _.total; i++) {
            builder(i);
        }
    } else {
        if(_.cur > _.middle) {
            if((_.total - _.cur) <= (_.show - _.middle)) {
                start = _.total - _.show + 1;
                end = _.total;
                for(var i = start; i <= end; i++) {
                    builder(i);
                }
            } else {
                start = _.cur - _.middle + 1;
                end = start + _.show - 1;
                for(var i = start; i <= end; i++) {
                    builder(i);
                }
            }
        } else {
            start = 1;
            end = _.show;
            for(var i = start; i <= end; i++) {
                builder(i);
            }
        }
    }

    _.$div.append(nxt);

    var $nxt = _.$div.find('.next');
    if(_.cur < _.total) {
        $($nxt).on('click', { _this: _, pageIndex: _.cur + 1 }, _.buildCallback);
        $($nxt).css({
            'background':'#4573DC none repeat scroll 0% 0%',
            'color':'#FFF'
        });
    } else {
        $($nxt).off('click');
        $($nxt).css({
            'background':'#F5F5F5 none repeat scroll 0% 0%',
            'color':'#AAA'
        });
    }
    var totalpagelength = this.total.toString();
    var totallength=totalpagelength.length+2;
    var gt = '';    // goto
    gt += '<span>';
    gt +=     '跳转至';
    gt +=     '<input type="text" class="jumpTo" style="margin:0 5px 0 5px;" size="'+totallength+'" />';
    gt +=     '';
    gt += '</span>';

    _.$div.append(gt);

    var $input = _.$div.find('.jumpTo');
    $($input).on('keydown', {_this:_}, function(e) {
        var k = e.which;
        if(k === 'undefined' || k != 13) {
            return;
        }
        e.preventDefault();
        var _t = e.data._this;
        var p = parseInt($(this).val());
        if(isNaN(p)) {
            JD.ui.pop.tip('请输入有效页号!');
            return;
        }
        if(p < 1 || p > _t.total) {
            JD.ui.pop.tip('请输入有效页号!');
            return;
        }
        _t.$div.empty();
        _t.cur = p;
        _t.build();
        _t.cb(p - 1);
    });

    var ttl = ''; // total
    ttl += '<span>';
    ttl += '';
    ttl += '<input type="text" style="display:none;" value="{0}" />';
    ttl += '<input type="text" style="border:0;text-align:center;" size="'+totallength+'" value="{1}" />';
    ttl += '';
    ttl += '</span>';
    //alert(totallength);
    _.$div.append(String.format(ttl, this.cur, this.total));
}

TDPager.prototype.buildCallback = function(e) {
    var _t = e.data._this;
    var pg = e.data.pageIndex;

    _t.$div.empty();
    _t.cur = pg;
    _t.build();
    _t.cb(_t.cur - 1);
}

String.format = function() {
    if(arguments.length == 0) {
        return null;
    }

    var str = arguments[0];

    for(var i = 1; i < arguments.length; i++) {
        var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
        str = str.replace(re, arguments[i]);
    }

    return str;
}

Best Regards,
Lucas Luo

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 1 条回复 时间 点赞
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册