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

Lucas for 京东 · February 27, 2017 · Last by Lucas replied at February 27, 2017 · 830 hits

前年写的平台分页逻辑,仅供参考。
改改硬编码的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 条回复 时间 点赞
需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up