前言
最近项目需求需要用到jquery的分页功能，所以就自己模仿着其它地方的写了一个，现在配合着原来写的gridview一起使用看看效果。
我们项目有个地方有点痛苦，他不能返回数据的总记录数，这个bug不修复我这边都只能动态附初始值，http://pifu.ttplay8.cn 另外首页尾页等因为刚刚写起皆暂时未实现，
等后面点调整后，有必要便一起发出来。
截图
分页代码使用示例
分页控件代码
var Pagination = function (_cfg) {
var sender = this;
this.cfg = {
parentEl: $('body'),
pageSize: 10,
pageNum: 7, //每页放几个显示的1,2,3,4
pageEdge: 2,
linkTo: '#',
linkText: 'pageno',
preText: '上一页',
nextText: '下一页',
ellipseText: "...",
pageChaged: function () { return false; }
};
if (_cfg) {
$.each(_cfg, function (key, value) {
sender.cfg[key] = value;
});
}
this.pageIndex = 0;
this.allRow = 0;
this.totalPage = 0;
this.el = null;
this.visible = false;
this.prePage = null;
this.nextPage = null;
this.numPage = null;
};
Pagination.prototype.render = function () {
this.onInit();
this.preRender();
};
Pagination.prototype.preRender = function () {
var scope = this;
var prePage = this.prePage;
var nextPage = this.nextPage;
var numPage = this.numPage;
var total = this.totalPage;
var index = this.pageIndex;
prePage.attr('class', 'prev');
if (index == 0) {
prePage.attr('class', 'current prev');
}
nextPage.attr('class', 'next');
if (index == total - 1) {
nextPage.attr('class', 'current next');
}
$.each(numPage, function (i, item) {
item.removeAttr('class');
if (scope.pageIndex == parseInt(item.html()) - 1) {
item.attr('class', 'current');
}
});
};
Pagination.prototype.onInit = function () {
this.init();
this.initHtml();
this.eventBind();
};
Pagination.prototype.init = function () {
var cfg = this.cfg;
var totalPage = this.totalPage;
var allRow = this.allRow;
var pageSize = cfg.pageSize;
this.totalPage = allRow % pageSize == 0 ? allRow / pageSize : allRow / pageSize + 1;
this.totalPage = parseInt(this.totalPage);
if (totalPage <= 1) {
this.visible = false;
}
};
Pagination.prototype.getNumPage = function () {
var cfg = this.cfg;
var pageSize = cfg.pageSize;
var index = this.pageIndex;
var totalPage = this.totalPage;
var pageNum = cfg.pageNum;
var limit = pageNum / 2;
var _limit = parseInt(limit);
limit = limit > _limit ? _limit + 1 : _limit;
var numPage = [];
var numArr = [];
for (var i = 0; i < pageNum; i++) {
if (index < limit) {
numArr.push(i + 1);
} else if (totalPage - index <= limit) {
numArr.push(totalPage - pageNum + i + 1);
} else {
numArr.push(index - limit + i + 2);
}
}
var elStr = '';
var linkTo = cfg.linkTo;
if (linkTo == '#') {
for (var i = 0, len = numArr.length; i < len; i++) {
var tempEl = $('
' + numArr[i].toString() + '');
numPage.push(tempEl)
}
} else {
var linkText = cfg.linkText;
var sign = '?';
if (linkTo.indexOf('?') != -1) {
sign = '&';
}
for (var i = 0, len = numArr.length; i < len; i++) {
var tempEl = $('
' + numArr[i].toString() + '');
numPage.push(tempEl);
}
}
return numPage;
};
Pagination.prototype.initHtml = function () {
var cfg = this.cfg;
var pageInfo = $('');
var linkTo = cfg.linkTo;
var _pre = '
上一页';
var _nex = '
下一页';
if (linkTo != '#') {
var linkText = cfg.linkText;
var sign = '?';
if (linkTo.indexOf('?') != -1) {
sign = '&';
}
_pre = '
上一页';
_nex = '
下一页';
}
var prePage = $(_pre);
var nextPage = $(_nex);
var numPage = this.getNumPage();
pageInfo.append(prePage);
$.each(numPage, function (i, item) {
pageInfo.append(item);
});
pageInfo.append(nextPage);
this.el = pageInfo;
this.prePage = prePage;
this.nextPage = nextPage;
this.numPage = numPage;
cfg.parentEl.append(pageInfo);
};
Pagination.prototype.eventBind = function (func) {
var scope = this;
var cfg = this.cfg;
var prePage = this.prePage;
var nextPage = this.nextPage;
var numPage = this.numPage;
prePage.unbind('click');
prePage.bind('click', function (e) {
if (scope.pageIndex != 0) {
scope.pageIndex = scope.pageIndex - 1;
scope.pageChanged();
}
});
$.each(numPage, function (i, item) {
item.unbind('click');
item.bind('click', function (e) {
if (scope.pageIndex != parseInt(item.html()) - 1) {
scope.pageIndex = parseInt(item.html()) - 1;
scope.pageChanged();
}
});
});
nextPage.unbind('click');
nextPage.bind('click', function (e) {
if (scope.pageIndex != scope.totalPage - 1) {
scope.pageIndex = scope.pageIndex + 1;
scope.pageChanged();
}
});
};
Pagination.prototype.pageChanged = function () {
var scope = this;
var cfg = this.cfg;
scope.el.remove();
var pageChaged = cfg.pageChanged;
if (pageChaged && typeof (pageChaged) == 'function') {
pageChaged(this);
}
this.render();
// alert(this.pageIndex);
};
后续
由于各方面皆不完整，此处便不作详细
说明
关于失联党员情况说明岗位说明总经理岗位说明书会计岗位说明书行政主管岗位说明书
，有必要的话，以后整理后会形成API，但是可能没有必要，因为代码总的来说还是很水的......
在学习吧......
浙公网安备 33021202002483