[原创作品] 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简单，就不上代码了。有问题可以在群里问我，也可以发邮件给我[email protected].

 

　　我这里再补充一下，以为分页器里边的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。