分页阅读html,html分页

1 (function($, window, document, undefined) {

2 //定义分页类

3 function Paging(element, options) {

4 this.element = element;

5 //传入形参

6 this.options = {

7 pageNo: options.pageNo||1,

8 totalPage: options.totalPage,

9 totalSize:options.totalSize,

10 callback:options.callback

11 };

12 //根据形参初始化分页html和css代码

13 this.init();

14 }

15 //对Paging的实例对象添加公共的属性和方法

16 Paging.prototype = {

17 constructor: Paging,

18 init: function() {

19 this.creatHtml();

20 this.bindEvent();

21 this.pageBtnHover();

22 },

23 //分页翻页按钮hover效果

24 pageBtnHover: function () {

25 $("#nextPage")

26 .on("mouseout",

27 function () {

28 $(this).find("img").attr("src", "/img/rightButtonPage.png");

29 });

30 $("#prePage")

31 .on("mouseout",

32 function () {

33 $(this).find("img").attr("src", "/img/leftButtonPage.png");

34 });

35 $("#nextPage")

36 .on("mouseover",

37 function () {

38 $(this).find("img").attr("src", "/img/pa_right_per.png");

39 });

40 $("#prePage")

41 .on("mouseover",

42 function () {

43 $(this).find("img").attr("src", "/img/pa_left_per.png");

44 });

45 },

46 creatHtml: function () {

47

48 var me = this;

49 var content = "";

50 var current = me.options.pageNo;

51 var total = me.options.totalPage;

52 var totalNum = me.options.totalSize;

53 content += "显示 102550100 项结果显示第1至" + totalNum+"项结果，共"+total+"页";

54 content += "";

55

56 //总页数大于6时候

57 if(total > 6) {

58 //当前页数小于5时显示省略号

59 if(current < 5) {

60 for(var i = 1; i < 6; i++) {

61 if(current == i) {

62 content += "" + i + "";

63 } else {

64 content += "" + i + "";

65 }

66 }

67 content += ". . .";

68 content += ""+total+"";

69 } else {

70 //判断页码在末尾的时候

71 if(current < total - 3) {

72 for(var i = current - 2; i < current + 3; i++) {

73 if(current == i) {

74 content += "" + i + "";

75 } else {

76 content += "" + i + "";

77 }

78 }

79 content += ". . .";

80 content += ""+total+"";

81 //页码在中间部分时候

82 } else {

83 content += "1";

84 content += ". . .";

85 for(var i = total - 4; i < total + 1; i++) {

86 if(current == i) {

87 content += "" + i + "";

88 } else {

89 content += "" + i + "";

90 }

91 }

92 }

93 }

94 //页面总数小于6的时候

95 } else {

96 for(var i = 1; i < total + 1; i++) {

97 if(current == i) {

98 content += "" + i + "";

99 } else {

100 content += "" + i + "";

101 }

102 }

103 }

104 content += "";

105 me.element.html(content);

106 },

107 //添加页面操作事件

108 bindEvent: function() {

109 var me = this;

110 me.element.off('click', 'a');

111 me.element.on('click', 'a', function() {

112 var num = $(this).html();

113 var id=$(this).attr("id");

114 if(id == "prePage") {

115 if(me.options.pageNo == 1) {

116 me.options.pageNo = 1;

117 } else {

118 me.options.pageNo = +me.options.pageNo - 1;

119 }

120 } else if(id == "nextPage") {

121 if(me.options.pageNo == me.options.totalPage) {

122 me.options.pageNo = me.options.totalPage

123 } else {

124 me.options.pageNo = +me.options.pageNo + 1;

125 }

126

127 } else if(id =="lastPage") {

128 me.options.pageNo = me.options.totalPage;

129 }else{

130 me.options.pageNo = +num;

131 }

132 me.creatHtml();

133 if(me.options.callback) {

134 me.options.callback(me.options.pageNo);

135 }

136 });

137 }

138 };

139 //通过jQuery对象初始化分页对象

140 $.fn.paging = function(options) {

141 return new Paging($(this), options);

142 }

143 })(jQuery, window, document);