很久没有写博客了，因为最近忙于一些杂七杂八的事情。不过，互联网的价值在于信息共享，因为共享，所以互联网才能飞快发展。博主建了一个技术共享qq群：164858883，因为目前人数还比较少，活跃度还不是很高，希望有和我一样想法的，有志于技术共享的技术宅，富有逗比精神的程序猿能一起加入，一起探讨和分享，一起创造更大的进步。当然，妹纸程序猿更受欢迎。^_^
好了，废话不多说了。今天要讲的分页器是web网页的分页器，就是下面这种效果，相信大家都用的多了。
现在要做的就是如何用javascript实现这个分页器。
实现原理：在html中列表实现这个效果。设置ul,在ul中动态添加li，给li添加属性pagenum，这个属性值等于此刻li代表的页号。在每次用户点击页号后，刷新数据，重新生成一个分页器。原理就是这样，直接上代码。
/**
* Created by Steven on 2015/04/11/
*
*/ function pager(
/*int*/ index,
/*int*/ size,
/*String*/ ulClassName
) { $('.' + ulClassName).empty();
var createLi = function (/*String*/content,
/*int*/ pageNum,
/*String*/ className) {
var li = $('<li></li>');
li.html(content);
li.addClass(className);
if (pageNum > 0) { //Only add 'pagenum' attribute to the clickable li tag
li.attr('pagenum', pageNum);
}
$('.' + ulClassName).append(li); }; if (index < 1) {
return;
} else if (index == 1) {
createLi('首页', 0, 'pager-first-li-disable');
createLi('上一页', 0, 'pager-previous-li-disable');
} else {
createLi('首页', 1, 'pager-first-li');
createLi('上一页', index - 1, 'pager-previous-li');
}
if (size <= 8) {
for (var i = 1; i <= size; i++) {
if (i != index) {
createLi(i, i, 'pager-normal-li');
} else {
createLi(i, 0, 'pager-index-li');
}
}
} else {
if (index - 3 <= 1) {//while index is in first the three items
for (var i = 1; i <= index + 5; i++) {
if (i != index) {
createLi(i, i, 'pager-normal-li');
} else {
createLi(i, 0, 'pager-index-li');
}
}
createLi('···', 0, 'pager-space-li');
createLi(size, size, 'pager-normal-li');
} else if (index + 5 >= size) {//while index is in the last five items
createLi('···', 0, 'pager-space-li');
for (var i = index - 5; i <= size; i++) {
if (i != index) {
createLi(i, i, 'pager-normal-li');
} else {
createLi(i, 0, 'pager-index-li');
}
} } else {
createLi('···', 0, 'pager-space-li');
for (var i = index - 3; i <= index + 5; i++) {
if (i != index) {
createLi(i, i, 'pager-normal-li');
} else {
createLi(i, 0, 'pager-index-li');
}
}
createLi('···', 0, 'pager-space-li');
createLi(size, size, 'pager-normal-li');
}
} if (index == size) {
createLi('下一页', 0, 'pager-next-li-disable');
createLi('尾页', 0, 'pager-last-li-disable');
} else if ((index < size)) {
createLi('下一页', index + 1, 'pager-next-li');
createLi('尾页', size, 'pager-last-li');
}
}
这里我需要声明一下，之前我还写过一个分页器，不过，把请求的url的参数也写了进去。其实这样是完全没必要，也是不好的，这样就增加了分页器的复杂性，并且不好操作。而直接这样写，在哪使用起来都很方便，因为确定url，url的参数还要考虑进去。而我直接加入li属性，可以通过jQuery很方便的找到所需的页号。也很方便的进行其他处理。在生成li的函数createLi也是经过优化才这样写。这样一个函数可以生成所有所需的li元素。用起来是相当方便的，同时有效缩短了代码长度，删去了重复代码。剩下的工作便是在css文件实现所需要的效果样式了，由于css简单，就不上代码了。有问题可以在群里问我，也可以发邮件给我zhuttymore@126.com.
我这里再补充一下，以为分页器里边的li是动态添加的，获取点击事件时，不能用$('.pager li').click();来获取，下面提供一下方法：
$(document).on('click',".page-box li",function(){
if(this.hasAttribute('pagenum')){
alert($(this).attr('pagenum'));
}
});
这样才能正常获取点击事件，并且获取pagenum页号属性。
修改了一个bug, 就是当前页等于最后一页时，createLi()第二个参数应该为0. 当初偷懒，写好最后一句时，直接copy上去，忘了改参数。现在是完整的可以使用了。
特别声明：原创作品，转载请注明出处http://zhutty.cnblogs.com。