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