分页阅读html,HTML+CSS入门 HTML分页详解

本篇教程介绍了HTML+CSS入门 HTML分页详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

1.CSS

1 /*

2  * 页数按钮样式

3  */

4 .page_div span:nth-of-type(2){

5     float: right;

6 }

7 .page_div a:last-child{

8     margin-right: 0;

9 }

10 .page{

11     padding-right: 21px;

12 }

13 .page_div a {

14     min-width: 30px;

15     height: 28px;

16     border: 1px solid #a6acb7;

17     text-align: center;

18     margin: 0 3px;

19     cursor: pointer;

20     line-height: 28px;

21     color: #000;

22     font-size: 13px;

23     display: inline-block;

24     background: #fff;

25 }

26

27 .page_div .current {

28     color: #FFFFFF;

29     border: none !important;

30     background-color: #44884f;

31

32 }

33 .page_div .current:hover{

34 color: #FFFFFF;

35     border: none !important;

36     background-color: #44884f;

37 }

38 .totalPages {

39     margin: 0 10px;

40 }

41

42 .totalPages span,

43 .totalSize span {

44     color: #0073A9;

45     margin: 0 5px;

46 }

47

48 /*end分页引用外部样式*/

2.HTML

1 

2                                 

3

4                                 

5                             

3.JS

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 

60                     for(var i = 1; 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 

72                         for(var i = current - 2; 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 

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 

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);

4.调用

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

2     $.extend({

3         pageTest: function (options) {

4             var settings = {

5                 row: 10,

6             };

7             getData();

8             function getData() {

9                 //调用接口获取数据

10                 //....

11                 //显示分页

12                 showPage();

13             }

14

15             function showPage(pageNo, total) {

16                 var totalPage = Math.ceil(total / settings.row);

17                 $("#page").paging({

18                     pageNo: pageNo,

19                     totalPage: totalPage,

20                     totalSize: total,

21                     callback: function (num) {

22                         settings.page = num;

23                         //调用接口获取数据

24                         getData();

25                     }

26                 });

27                 $("#selectPage").val(settings.row);

28             }

29         }

30     });

31

32 })(jQuery, window, document);

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！