[原创作品] javascript 实现的web分页器原理

　　很久没有写博客了，因为最近忙于一些杂七杂八的事情。不过，互联网的价值在于信息共享，因为共享，所以互联网才能飞快发展。博主建了一个技术共享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。